﻿.* {
    margin: 0;
    padding: 0;
}

header,
footer,
aside,
nav,
article {
    display: block;
}

#churchImage {
    width: 100%;
}

.fullMargin {
    margin-top: 20px;
}

.halfMargin {
    margin-top: 10px;
}

.stretchBetween {
    justify-content: space-between;
}

.stretchAround {
    justify-content: space-around;
}

.flexCenter {
    justify-content: center;
}

#AcctI_content {
    max-width: 830px;
}

@media screen and (min-width: 890px) {
    .saveAI2Div {
        justify-content: flex-end;
        margin-right: 30px;
    }
}

#hDetail .flex-row div {
    display: flex;
}

.saveAI2Div {
    margin-right: 30px !important;
}

#msDetailsContainer .flex-row {
    justify-content: space-between;
}

#msDetailsContainer .flex-column label {
    margin-right: 10px;
}

.msDetailsContainer .flex-row {
    justify-content: space-between;
}

.msDetailsContainer .flex-column label {
    margin-right: 10px;
}

#StudentsTuition {
    display: flex;
    flex-wrap: wrap;
}

#makPayment, #makCaresPayment, #makeUpPaymentB, #makeRegisPayment {
    margin-top: 5px;
    background-color: #8b0e04;
    color: white;
    font-size: 17px;
    font-weight: bold;
}



@media only screen and (min-width: 730px) {
    #relEdInfoText {
        flex: 2;
    }
}

.oneTab {
    padding-left: 2em;
}

.twoTabs {
    padding-left: 5em;
}

#AccountInfo {
    display: flex;
    flex-direction: column;
}

#AcctI {
    overflow-x: hidden !important;
}


body {
    font: 13px/22px Helvetica, Arial, sans-serif;
    background: #f0f0f0;
}

.buttonlink,
.ui-dialog-content .buttonlink {
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
    display: inline-block;
    height: 30px;
    font-weight: 800;
    width: 180px;
    background-color: #AC9732;
    color: #8B0E04;
    border: 3px outset #F5EBDF;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .buttonlink:active,
    .ui-dialog-content .buttonlink:active {
        border: 3px inset #F5EBDF;
    }

.tabs .buttonlink:hover {
    color: #AC9732;
    background-color: #8B0E04;
    background-image: none;
}

.buttonlink:hover {
    color: #AC9732;
    background-color: #8B0E04;
    background-image: none;
}

.tabs a.tab_selected {
    text-decoration: none;
    text-align: center;
    line-height: 34px;
    display: inline-block;
    /*height: 34px;*/
    overflow: visible;
    font-weight: 800;
    padding: 0 20px 0 20px;
    /*width:175px;
        background-color:#AC9732;*/
    color: #8B0E04;
    border: 1px solid #8B0E04;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


.tabs a.tab {
    text-decoration: none;
    text-align: center;
    line-height: 34px;
    display: inline-block;
    /*height: 34px;*/
    overflow: visible;
    background-color: #AC9732;
    color: #8B0E04;
    border: 1px solid #AC9732;
    border: 1px solid #8B0E04;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tabs a.tablink:hover {
    color: #8B0E04;
    background-color: none;
    background-image: none;
}

h1 {
    font-size: 14px;
    line-height: 16px;
    padding: 0px 0;
    color: #8b0e04;
}

a {
    color: #8b0e04;
}

.mainNav {
    border: 1px solid black;
    margin: 5px auto 1px auto;
    width: 750px;
    height: 375px;
}

    .mainNav td {
        border: 1px solid black;
        width: 50%;
        text-align: center;
        height: 50%;
    }

.defTable td {
    padding-left: 30px;
    border: 0px none;
    width: auto;
    text-align: left;
}

.pgNotice {
    color: #8b0e04 !important;
    font-weight: bold;
}

.flink {
    text-decoration: underline;
    color: #8b0e04 !important;
    cursor: hand;
    cursor: pointer;
    margin-left: 10px;
}

    .flink#lnkSaveAI,
    .flink#lnkSaveAI2,
    .flink#saveC,
    .flink#lnkqpSave,
    .flink#lnkDelbi,
    .flink#lnkESbi,
    .flink#newBA,
    .flink#lnkBISave,
    .flink#lnkBICxl {
        font-weight: bold;
        font-size: 14px;
    }

    .flink#lnkSaveAI,
    .flink#saveC,
    .flink#lnkSaveAI2 {
        font-size: 18px;
    }

#lnkqpSave {
    float: right;
}

.lbl {
    margin-right: 10px;
}

.fr {
    float: right;
    padding-right: 8px;
}

.frt {
    float: right;
}

.hlbl {
    margin-right: 3px;
    padding: 3px, 3px, 3px, 3px;
    width: 150px;
    display: inline-block;
}

div #AcctI {
    /*width: 1012px;*/
}

div #AI1,
#AI2 {
    height: auto;
    overflow: auto;
    margin-bottom: 5px;
}

#CCTbl1 {
    width: 100%;
}

#txtState,
#txtBCState,
#txtExpM {
    width: 75px;
}

#txtStreet,
#txtBCStreet,
#txtBCName,
#txtEmail,
#txtBAName {
    width: 98%;
}

#lnkSaveAI {
    float: left;
    margin-top: 15px;
    font-size: 18px;
    margin-left: 0px;
}

#txtBillAccts,
#txtPayMethod {
    margin-left: 10px;
    margin-right: 15px;
}

.required {
    color: Red;
}

#MemContribs,
#Hist {
    margin-top: 5px;
}

div #BAcctI {
    clear: right;
    border: 1px solid gold;
}

.hsmall {
    font-size: 16px;
}

#qpdMemo {
    width: 300px;
}

.authinp {
    width: 150px;
    border-radius: 5px;
}

#qpdBCName,
#qpdCCNum,
#qpdBCStreet {
    width: 211px;
}

.ui-dialog-titlebar-close {
}

#lnkPassreset {
    float: right;
}

#WelcomeP {
    color: #e6840a;
    font-size: 22px;
    font-weight: bolder;
    margin: 5px;
    text-align: center;
}

.lnkpdf {
    padding-left: 5px;
    position: relative;
    top: 4px;
}

.disabled {
    color: Gray !Important;
    cursor: default !Important;
}

.chead {
    height: 35px;
    overflow: hidden;
    width: 95%;
}

.noTitleStuff .ui-dialog-titlebar {
    display: none;
}

.noTitleStuff .ui-dialog-buttonpane {
    display: none;
}

#lnkPGvs {
    position: relative;
    top: .5em;
}

#lnkPGStat {
    position: relative;
    top: -.5em;
}

#logo,
#images {
    position: relative;
}

    #logo > img {
        position: absolute;
        top: 10px;
        left: 0px;
    }

    #images > img {
        position: absolute;
        top: 0px;
        right: 0px;
    }

#uNameLbl {
}

#uname {
}

#pwdLbl {
}

#pwd {
}

#lnklogin {
    border-radius: 5px;
}

#lnkPassreset {
}

#notifications {
    position: absolute;
    bottom: 0px;
    right: 35px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 175px;
    width: 600px;
    background-color: #AC9732;
    display: none;
    padding: 15px 4px 4px 10px;
    color: #400602;
    font-weight: bold;
}

#clsNotice {
    position: absolute;
    top: 7px;
    right: 7px;
    cursor: pointer;
}

#yearEndReports {
    position: absolute;
    top: 25px;
    right: 15px;
}
/*#yearEndReports2 {
    position:absolute;
    top:1px;
    right:15px

}*/

#MemberContributions {
    position: relative;
    overflow: auto !important;
}

.footlink {
    color: White !Important;
    font-size: 12px;
    margin-left: 0;
}

#txtMemo {
    width: 90%;
}

.homeP {
    font-weight: bold;
    font-size: 13px;
    position: absolute;
    left: 0;
    bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
}

.ui-widget-header {
    color: #ffffff !important;
    background-image: url(../images/pop_header_bkgnd.png) !important;
}

    .ui-widget-header .ui-icon {
        background-image: url(../Content/themes/base/images/ui-icons_999933_256x240.png) !important;
    }

#lnkESbi {
    height: 28px;
    width: 75px;
}

#lnkDelbi {
    height: 28px;
    width: 75px;
}

#newBA {
    height: 28px;
    width: 75px;
}

#lblMyBillAccts {
    font-size: 14px;
    width: 145px;
}

#myBillAccts_container {
}

#AI1 div {
    float: left;
    margin-right: 10px;
}

@media screen and (max-width: 730px) {
    #passRoleRow {
        width: 100% !important;
    }
}

#AI1 input {
    display: block;
    width: 100px;
}
/** Min size for grid history table */

#grdHist .k-grid-content {
    min-height: 220px;
}
/* Kendo item and header sizing*/

.k-treeview .k-item {
    font-size: 14px;
}

.k-treeview span.k-in {
    font-size: 16px;
    white-space: initial;
}

#AI1 label {
    display: block;
    margin-top: 5px;
}

#AI2 div {
    float: left;
    margin-right: 10px;
}

#AI2 input {
    display: block;
    width: 100px;
}

#AI2 label {
    display: block;
}

#BillI_content div {
    float: left;
    margin-right: 10px;
}

#BillI_content input {
    display: block;
    width: 100px;
}

#BillI_content label {
    display: block;
}

#BillI_content a {
    display: block;
}

#BillI_content span {
    display: block;
}

#passChange div {
    float: left;
    margin-right: 10px;
}

#passChange input {
    display: block;
    font-size: 16px;
}

#passChange label {
    width: 200px;
    display: block;
}

#ccDetail div {
    float: left;
    margin-right: 10px;
}

#ccDetail input {
    display: block;
}

#ccDetail label {
    display: block;
}

#hDetail div {
    float: left;
    margin-right: 10px;
}

#hDetail label {
    width: 170px;
    display: block;
}

.quickPayDiv {
    float: left;
    margin-right: 10px;
}

#Quikpay input {
    display: block;
}

#Quikpay label {
    width: 170px;
    display: block;
}
/*.ui-dialog, .ui-dialog, .ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {
            background: lightgrey !important
        }*/
/** Conditionally hide breaks when size is greater than 600 px width */

@media screen and (min-width: 600px) {
    .rwd-break {
        display: none;
    }

    .floatRightLarge {
        float: right !important;
    }

    #bipanel {
        position: relative;
    }
    /* Float this right for large screens so it stays aligned right */
    #refHist {
        float: right;
    }
}
/** Conditionally finish line when size is less than 600 px width */

@media screen and (max-width: 600px) {
    .rwd-break {
        clear: both;
    }
    /* Restyle button links at smaller resolution */
    .buttonlink,
    .ui-dialog-content .buttonlink {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        font-weight: 600;
        border: 2px outset #F5EBDF;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .floatRightLarge {
        float: unset !important;
    }

        .floatRightLarge label {
            text-align: left !important;
        }
    /* Desktop view 35 pixels from the right positioned absolutely, but for mobile let's center it and have  the
                message occupty 100% of the screen width so the message doesn't run on or get cut off
            */
    #notifications {
        position: center;
        width: 100%;
        height: 260px;
        left: unset;
        right: unset;
    }
    /* Below are custom look and feel overrides for small screens.  You will only see them applied when the
                screen width is less than or equal to 600 pixels
            */
    .container h1 {
        font-size: 16px;
    }

    .container p {
        font-size: 11px;
    }


    #lnkMDocs {
        display: none;
    }

    #memberhead {
        display: none !important;
    }
    /** Hide footer for small screens */
    #footer {
        display: none;
    }

    .lnkpdf {
        display: none;
    }

    #yearEndReports2 {
        display: none;
    }

    .k-widget {
        font-size: 16px;
    }

    input,
    textarea {
        font-size: 16px;
    }

    .k-treeview .k-item {
        font-size: 13px;
    }

    .k-treeview span.k-in {
        font-size: 14px;
    }
}
/** For very large screens let's set a maximum distance that the right side account buttons will float by positioning them
    absolutely 800 px from left side of screen
*/

@media screen and (min-width: 1000px) {
    .floatRightLarge {
        position: absolute;
        left: 800px;
        padding-bottom: 4px;
    }
}
