.currency
{
    text-align: left;
    margin: 0 10px 0 0;
    width: 100px;
}

.currency:before {
    content: "$";
    position: relative;
    left: 30px;
}

.continuous {
    display: flex;
}

.form-title {
    margin: 0px;
    padding-left: 10px;
    padding-top: 20px;
    padding-bottom: 0px;
    font-family: inherit;
    font-weight: 700;
    font-size: 18px;
}

.two-col-container {
    display: grid;
    grid-template-columns: 50% 50%;
    /*grid-gap: 2px;
    padding: 2px;
    border: 1px solid rgb(128 128 128);
    box-sizing: border-box;
    overflow: scroll;*/
}


.three-col-container {
    display: grid;
    grid-template-columns: auto auto auto;
}


.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;  /*auto auto auto auto auto auto auto */
    grid-gap: 2px;
    padding: 2px;
    border: 1px solid rgb(128 128 128);
    box-sizing: border-box;
    overflow: scroll;
}


.checkbox-grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 2px;
    padding: 2px;
}

div.checkbox-grid-cell {
    background: LightBlue;
    border: 1px solid Blue;
    padding: 10px;
}

@media screen and (max-width: 640px) {
    .checkbox-grid {
        grid-template-columns: 100%;
    }
}

/*.grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 10px 0;
    width: auto;
}*/

.grid-header-item {
    /*background-color: rgba(255, 255, 255, 0.8);*/
    background-color: azure;
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 2px;
    /*    font-size: 14px; */
    text-align: center;
    font-weight: bold;
    padding: 2px;
    /*    width: 100px;
    max-width: 110px;
*/
    width: 150px;
  }

.grid-item {
    /*background-color: rgba(255, 255, 255, 0.8);*/
    /*border: 1px solid rgba(0, 0, 0, 0.8);*/
    padding: 2px;
    /*font-size: 12px;*/
    text-align: center;
    width: 125px;
    max-width: 110px;

}

.grid-input-item {
    /* padding: 2px; */
    text-align: center;
    width: auto;
    max-width: 150px;
    /* border: none; */
}

.grid-button {
    white-space: normal;
    word-wrap: break-word;
}

.grid-button-disabled {
    font-size: 14px;
    text-align: center;
    background-color: grey;
}

.grid-button-enabled {
    font-size: 14px;
    text-align: center;
    background-color: azure;
}

.grid-id-item {
    width: 25px;
    text-align: center;
}

.yes-no-radio {
    display: inline-block; 
    margin-left: 2px;
    margin-right: 2px;
}

.yes-no-label {
    display: inline-flex;
    margin-left: 5px;
    margin-right: 5px;
    /* width: 100px; */
}

.grid-source-field {
    display: inline-flex;
    margin-left: 5px;
    margin-right: 5px;
    width: 100px;
}


/* MF(3/25/22) - use these for now but convert to Thomas' rg-table class in near future*/
table {
    border: 1px solid blue;
    border-collapse: collapse;
    overflow-x: scroll;
    background: white;
    margin-left: 24px;
}

th, td {
    border: 1px solid blue;
    border-collapse: collapse;
    width: auto;
    text-align: center;
}

.campaign-image {
    height: 150px;
    width: 135px;
    padding: 3px;
    float: left;
}

.campaign-banner {
    display: inline-block;
    padding: 3px;
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #214c62;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    width: 100%
}


.campaign-header .campaign-footer{
    background-color: #d9edf7;
}

.campaign-header p {
    font-size: 14pt;
    text-align: center;
    width: 100%;
    font-family: Arial;
}

.campaign-footer p {
    font-size: 11pt;
    text-align: center;
    width: 100%;
    font-family: Arial;
}

.campaign-body {
    display: inline-flex;
    padding: 3px;
    font-size: 11pt;
    /*    align-items: center; */
} 

    .campaign-body p {
        padding: 2px;
    }





/*[class*="grid-col-"] {
    float: left;
    padding: 2px;
    border: 2px solid blue;
}*/

/* id */
/*.grid-col-0 {
    width: 10%;
}*/

/*first name */
/*.grid-col-1 {
     width: 15%; 
}*/

/*last name */
/*.grid-col-2 {
     width: 15%; 
}*/

/* relationship */
/*.grid-col-3 {
     width: 70px; 
}*/

/* other */
/*.grid-col-4 {
    width: 15%
}*/

/* benefit amount */
/*.grid-col-5 {
    width: 15%
}*/

/* source */
/*.grid-col-6 {
    width: 20%
}*/

/* income amount */
/*.grid-col-7 {
    width: 20%;
}*/

/* frequency */
/*.grid-col-8 {
    width: 20%
}*/

/* provider */
/*.grid-col-9 {
    width: 20%
}*/

/* actions */
/*.grid-col-10 {
    width: 20%
}*/

/* unused */
/*.grid-col-11 {
    width: 10%
}*/

/* unused */
/*.grid-col-12 {
    width: 10%
}


.row::after {
    content: "";
    display: table;
    clear: both;
}*/

/*@media(max-width: 600px)
{*/
    /*.grid-container {
        grid-template-columns: repeat(1, 1fr);
    }
*/
    /*.grid-col-1, .grid-col-2, .grid-col-3, .grid-col-4, .grid-col-5, .grid-col-6, .grid-col.grid-col-7 {
        width: 100%;
    }
}*/

    /* for the CONFIRMATION DIALOG window     */


/* Add padding and center-align text to the container */
.modal-container {
    padding: 16px;
    text-align: center;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    left: 50%;
    top: 50%;
    width: fit-content; /* Full width */
    height: fit-content; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #474e5d; /* #ccc */
    padding-top: 10px; /*50px;*/
    text-align: center;
    transform: translate(-50%, -50%);
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    /*margin: 5% auto;*/
    margin-top: 5%;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border: 1px solid #888;
    width: 100%; /* Could be more or less, depending on screen size */
}
/*
.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
*/

/* Style the horizontal ruler */
hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}

/* The Modal Close Button (x) */
.close {
    position: absolute;
    right: 35px;
    top: 5px;
    font-size: 20px; /*40px*/
    font-weight: bold;
    color: white; /*#f1f1f1*/
}

    .close:hover,
    .close:focus {
        color: #f44336;
        cursor: pointer;
    }

/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Change styles for cancel button and delete button on extra small screens */
@media screen and (max-width: 360px) {
    .modal {
        position: fixed; 
        left: 50%;
        top: 50%;
        overflow: scroll; /* Enable scroll if needed */
    }
    .cancelbtn, .deletebtn {
        width: 100%;
    }
}

/* mobile */
@media screen and (max-width: 360px) {
    .two-col-container {
        display: inline-block;
    }
    .campaign-banner {
        display: inline-block;
    }

    .campaign-body {
        display: inline-block;
        font-size: smaller;
        text-align: center;
    }
    
}

/* tablet */
@media screen and (max-width: 768px) {
    .two-col-container {
        /*display: inline-block;*/
    }

    .campaign-banner {
        display: block;
    }

    .campaign-body {
        display: block;
        font-size: smaller;
    }
    
}