/** Show/Hide Password **/
.iconEyeSlash {
    display: inline-block;
  background: url('../images/eye-slash-fill-18.png') no-repeat top left;
  }
  .iconEye {
    display: inline-block;
  background: url('../images/eye-fill-18.png') no-repeat top left;
  }
/************* Added by KP 10/11/2024 *****************/  

.plainlink {
    color: white !important;
    text-decoration: none !important;
}


  /************* Added by KP 8/8/2024 *****************/  

.controlhidden{
    display:none;
    visibility: hidden;
 }
/*****************************************************/

.hide-item {
height: 0; padding: 0;
}
.sidebar-bk {
background: var(--cotnbanner); ;
}
.sidebar-content,.sidebar-nav {
    background: var(--cotnbanner); 
}
.sidebar-user {
    color:white;
    background: var(--cotnbanner); 
}
.menu-icon {
    color: var(--cotngray3);
    font-size: xxx-large;
}

.menu-icon-medium {
    color: var(--cotngray3);
    font-size: xx-large;
}
.menu-icon-smaller {
    color: var(--cotngray3);
    font-size: x-large;
}
.menu-icon-small {
    color: var(--cotngray3);
    font-size: large;
}
.top-menu-icon {
    height: 5em;
}
.white-text {
    color: var(--cotnbodytext);}

.white-icon {
    color: white;}

.white-bk {
    background-color: white;
}

.accordion .card-title a {
    color: white;}


.center-element {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.showhidetoggle {
 
       min-height: 32px; 
       color: white;
       padding-left: 5px;
       padding-top: 8px;
       padding-bottom: 8px;
       margin-bottom: 10px; 
       margin-top: 20px; 
       padding-right: 5px;
       background: var(--cotnbutton);
       font-weight: bold;
       border-width: 1px;
       border-style: solid;
       border-color: #7f7f7f;
   }
.toggle .togglewrapper {
    margin-bottom: -10px; 
        margin-top: -20px;
   }
   a[rel*="toggle"] {
   text-decoration: none; 
   vertical-align: middle;
   }
   .undertogglegroupbox {
       margin: 15px 0px 10px 0px;
       text-align: left;
   }

   
  .pbp-label {
    color: var(--pbblue);
    float:left;
    text-align: right;
    margin-top: -3px;
  }

  .pbp-item-box {
    min-width: 425px;
    display:inline-block;
    position: relative;
  }

  .pbp-button-box {
    min-width: 100px;
    display:inline-block;
    position: relative;
  }

  .view-height {
    min-height: 100vh;      
  }

  .pbp-dropdown {
    padding:0;
}

.bt-box{
    height: 20px;
}

.pbp-radio-grp {
    margin-left: 1em;
}

.table-icon-pdf {
    border: none;
    background-image: url('../images/table-icon-pdf.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent !important;
    width: 30px;
    height: 30px;}

.table-icon-copy {
    border: none;
    background-image: url('../images/table-icon-copy.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent !important;
    width: 30px;
    height: 30px;}

.table-icon-excel {
    border: none;
    background-image: url('../images/table-icon-excel.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent !important;
    width: 30px;
    height: 30px;}
    
.table-icon-csv {
    border: none;
    background-image: url('../images/table-icon-csv.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent  !important;
    width: 30px  !important;
    height: 30px;}

.grid-icon-trash {
    border: none;
    background-image: url('../images/trashcan.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #c12e2a  !important;
    width: 32px !important;
    height: 32px;}
    
.grid-icon-edit {
    border: none;
    background-image: url('../images/pencil-small.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 32px !important;
    height: 32px;}

.grid-icon-approval {
    border: none;
    background-image: url('../images/checkmark.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 32px !important;
    height: 32px;}    


    .label-icon-house {
    border: none;
    background-image: url('../images/FTM icons_house.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    width: 30px;
    height: 30px;}


.label-icon-pencil {
    border: none;
    background-image: url('../images/FTM icons_pencil.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    width: 30px;
    height: 30px;}

    .label-icon-question {
        border: none;
        background-image: url('../images/FTM icons_question.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-color: transparent;
        width: 30px;
        height: 30px;}

    .label-icon-present {
        border: none;
        background-image: url('../images/FTM icons_present.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-color: transparent;
        width: 30px;
        height: 30px;}

.label-icon-gear {
    border: none;
    background-image: url('../images/FTM icons_gear.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    width: 30px;
    height: 30px;}
                        
.label-icon-dollarsign {
    border: none;
    background-image: url('../images/FTM icons_dollarsign.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    width: 30px;
    height: 30px;}
                            
    .label-icon-calculator {
        border: none;
        background-image: url('../images/FTM icons_calculator.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-color: transparent;
        width: 30px;
        height: 30px;}
                            
    .label-icon-document {
        border: none;
        background-image: url('../images/FTM icons_document.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-color: transparent;
        width: 30px;
        height: 30px;}    

    .label-icon-document_w {
        border: none;
        background-image: url('../images/FTM icons_document_w.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-color: transparent;
        margin-left: 11px;
        width: 55px;
        height: 55px;}    

        .label-icon-arrows {
        border: none;
        background-image: url('../images/FTM icons_arrows.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-color: transparent;
        width: 30px;
        height: 30px;}    

    .line-icon-delete {
        border: none;
        background-image: url('../images/line-icon-delete.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-color: transparent;
        width: 20px;
        height: 20px;}  

    .line-icon-edit {
        border: none;
        background-image: url('../images/line-icon-edit.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-color: transparent;
        width: 20px;
        height: 20px;}  

        .btn-secondary {
    color: #fff; 
    background-color: transparent; 
     border-color: transparent; 
}

.btn-secondary:hover {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}

.btn-secondary.focus,.btn-secondary:focus {
    box-shadow: none
}

/* This group of btn-secondary is adapted from modern.css to make the table buttons transparent */
.btn-secondary.disabled,.btn-secondary:disabled {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}

.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}

.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: none
}
 .pbp-layoutunit {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     /*text-align: center !important;*/
     padding-left: 50px; /* KPEDIT 180130 */
     padding-right: 10px; /* KPEDIT 180130 */
     font-size:17px;
    }
.pbp-display-box {
    width: 730px;
    min-height: 170px;
    display: inline-grid;
    position: relative;
    border-style: solid;
    background-color: #dce4de;
    border-width: 1px;
    margin: 20px;
    border: 20px;
    padding: 10px; 
    border-radius: 10px;
    /*box-shadow: 2px 2px 1px rgb(81, 123, 206);*/
    }
    @media screen and (max-width: 1673px) {
        .pbp-display-box {
            margin-left: 20%;
        }
    }
    @media screen and (max-width: 1000px) {
        .pbp-display-box {
            margin-left: 0px;
        }
    }


    .pbp-funding-box {
        width: 642px;
        min-height: 170px;
        display: inline-grid;
        position: relative;
        border-style: solid;
        background-color: #dce4de;
        border-width: 1px;
        margin: 20px;
        border: 20px;
        padding: 10px; 
        border-radius: 10px;
        /*box-shadow: 2px 2px 1px rgb(81, 123, 206);*/
        }

        .pbp-funding-box-text {
            width: 335px;
            min-height: 170px;
            display: inline-block;
            position: relative;
            border-style: solid;
            background-color: #dce4de;
            border-width: 1px;
            margin: 0px;
            border: 0px;
            padding: 0px; 
            }
        .pbp-funding-box-chart {
            width: 17%;
            min-height: 170px;
            display: inline-block;
            position: relative;
            border-style: solid;
            background-color: #dce4de;
            border-width: 1px;
            margin: 0px;
            border: 0px;
            padding: 0px; 
            }

        @media screen and (max-width: 1625px) {
            .pbp-funding-box {
                margin-left: 20%;
            }
        }
        @media screen and (max-width: 1056px) {
            .pbp-funding-box {
                margin-left: 0px;
            }
        }


        

    .pbp-dot-box {
        width: 22%;
        min-height: 50px;
        display: inline-block;
        position: relative;
        background-color: transparent;
        background-image: url('../images/dotted-grid.png');
        margin: 2px;
        border: 2px;
        padding: 2px; 
        }     

    @media screen and (max-width: 1200px) {
        .pbp-dot-box {
            background-image: none;
        }
        .pbp-dot-mid-box {
            width:50%;
        }
        }
            
        
    .pbp-dot-mid-box {
        width: 50%;
        min-height: 50px;
        display: inline-block;
        position: relative;
        background-color: transparent;
        margin: 20px;
        border: 20px;
        padding: 10px; 
        }         

.pbp-card-row {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
}

.pbp-card-header {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center !important;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;    }

.pbp-card-header-2 {
    font-size: 20px;
    font-weight: 700;
}
.form-control {
    font-size : 15px;
    height : 37px;
}

.input-group-text {
    font-size: 17px;
    max-width: 430px;  /* KPEDIT 231116 */
    white-space: normal; /* KPEDIT 231116 */
    text-align: left; /* KPEDIT 231116 */
}

.body {
    font-size: 17px;
}
.btn {
    padding: 0.5rem 0.7rem;
}
.text-small {
    font-size : small;
}

.text-smaller {
    font-size : smaller;
}

.text-bold {
    font-weight: 600;
}

.text-17 {
    font-size:17px;
}

.text-larger {
    font-size:larger;
}


.btn.group {
    float: right;
}
.ml-10 {
    margin-left: 10px;
}
.btn-small {
    width: 61px;
    height: 17px;
    font-size: 10px;
    padding-top: 0px;
}
.church-name-box {
    width: 590px;
    /* min-height: 250px; */
    display: inline-block;
    position: relative;
    margin-top:10px;
}

.page-top {
    min-height: 51px;
    background-color: transparent;
    margin-left: -12px;
    margin-right: -12px;
}

.hide-button {
    border: none;
    background-color: white;
}

.layoutgrid,
.layoutunit {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;  /* KPEDIT 180130 */
    padding-right: 10px; /* KPEDIT 180130 */
}
/* Set up some rules to govern the.layoutgrid */

.layoutgrid {
    display: block;
    clear: both !important;
}
.layoutgrid .layoutunit {
    float: left;
    width: 100%;
    padding: 10px;
}

.sidebar-link, a.sidebar-link {
    color : white;
}

a {
    color: #0a0a0a;
    text-decoration: underline;
    background-color: transparent
}

a:hover {
    color: #13642b;
    text-decoration: underline
}


.btn {
    background-color: var(--cotnbutton);
    border-color: var(--cotnbutton);
}

.btn:active {
    background-color: var(--cotnbutton);
    border-color: var(--cotnbutton);
}

.btn:hover {
    background-color: var(--cotnbuttonhover);
    border-color: var(--cotnbuttonhover);
}

.btn-primary {
    background-color: var(--cotnbutton);
    border-color: var(--cotnbutton);
}

.btn-primary:hover {
    background-color: var(--cotnbuttonhover);
    border-color: var(--cotnbuttonhover);
}
.btn-primary:active {
    background-color: var(--cotnbutton);
    border-color: var(--cotnbutton);
}

.whiteBk-bold {
    background-color: #ffff !important;
    font-weight: 700;
}

.bold-text {
    font-weight: 700;
}
.text-primary {
color:  var(--cotnbodytext);
}

/* When the checkbox is checked, add a green background */
.container input:checked ~ .checkmark {
    background-color: var(--cotnbutton);
  }
.textarea {
    width: 100%;
}