﻿.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
}

#contactInfo #contactInfoTable {
    background-color: #3b86b5;
    color: white;
    border-radius: 20px;
    padding: 15px;
}

#headerText {
    color: #3b86b5;
    font-size: 38px;
}

.headerTextRight {
    font-size: 14px;
}

#contactInfo #contactInfoTable td {
    background-color: #3b86b5;
    color: white;
    border-radius: 20px;
}

#invoiceInfoTable {
   background-color: white;
   /*border-radius: 20px 20px 20px 20px;*/
   border-radius: 15px;
   padding: 15px;
}

#contactInfo #contactInfoTable th {
    background-color: #3b86b5;
    color: white;
    border-radius: 15px;
    padding: 15px;
}

#invoiceInfoTable th {
    color: white;
    border-radius: 15px; /* Only for top corners of th */
    padding: 15px;
}

#invoiceInfoTable td {
    border-radius:15px;
    border-bottom: none;
    margin: 10px;
}

/*body {
    background-color: #eef0f2;
}*/

.activeButton {
    background-color: #98d2dd;
}

.inactiveButton {
    background-color: #3b86b5;
}

.btn.btn-primary {
    border-color: transparent; /* NOTE: we can also use 'inherit' here and it'll work just the same to remove the border color. */
}

#breadCrumbLink {
    color: #98d2dd;
    font-size: 12px;
    font-weight: 900;
}

#breadCrumbLink a {
    color: #98d2dd;
    text-decoration: none;
}

/*span.label {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #007bff;
    color: #ffffff;
    background-color: #007bff;
    border-radius: 8px;
}

span.label:hover {
    border: 1px solid #3b86b5;
    background-color: #3b86b5;
}*/

#contactInfo {
    background-color: RGBA(248,249,250);
}

#clear {
    cursor: pointer;
}

.wrap-tabs,
.wrap-tabs .tabs,
.wrap-tab-contents,
.tab-content {
    width: 100%;
    float: left;
    position: relative;
}

.wrap-tabs {
    margin: 0 0 10px 0;
}

.wrap-tabs .tabs {
    transition: left 0.4s;
}

.wrap-tabs .wrap-tabs-overlay-left,
.wrap-tabs .wrap-tabs-overlay-right {
    position: absolute;
    height: 100%;
    width: 40px;
    background: none #ff0;
    top: 0;
    left: 0;
    z-index: 100;
    cursor: pointer;
}

.wrap-tabs .wrap-tabs-overlay-right {
    left: auto;
    right: 0;
}

.tabs .tab {
    float: left;
    /*padding: 5px;*/
    margin: 0 5px 0 0;
    /*border-bottom: 3px solid #eee;
            color: #aaa;*/
}

    .tabs .tab:hover {
        /*cursor: pointer;
                border-bottom: 3px solid #aaa;
                color: #000;*/
    }

.tabs .tab-active,
.tabs .tab-active:hover {
    /*color: #000;
            border-bottom: 3px solid #6C9;*/
    border-radius: 10px;
}

.tab-contents {
    position: relative;
}

.custom-input {
    /*padding-right: 30px;*/
    background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fit="" width="24" height="24" preserveAspectRatio="xMidYMid meet" focusable="false"><path d="M11.982 11.41C15.304 11.401 18 13.862 18 16.897v3.385c0 .397-.351.718-.785.718H6.785C6.351 21 6 20.679 6 20.282V16.96c0-3.034 2.664-5.54 5.982-5.55zM12 3c2.071 0 3.75 1.679 3.75 3.75 0 2.071-1.679 3.75-3.75 3.75-2.071 0-3.75-1.679-3.75-3.75C8.25 4.679 9.929 3 12 3z" transform="translate(-356 -511) translate(0 80) translate(118 395) translate(24 24) translate(190) translate(24 12)"></path></svg>') no-repeat center right;
    background-size: 24px;
}

.custom-input-group-name {
    /*padding-right: 30px;*/
    background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false"> <path d="M7.108 11.85c2.178-.007 4.069 1.194 5.01 2.955-.553.928-.868 2.004-.868 3.145v3.343c0 .05.004.1.012.147H2.236c-.373 0-.68-.271-.73-.621L1.5 20.72V17.4c0-3.034 2.498-5.54 5.608-5.55zm10.484 1.309c2.634-.018 4.789 2.054 4.903 4.656l.005.218v2.7c0 .357-.266.653-.611.7l-.096.006h-8.336c-.358 0-.654-.266-.7-.61l-.007-.097v-2.636c0-2.689 2.152-4.92 4.842-4.937zm.032-7.47c1.837 0 3.326 1.488 3.326 3.325 0 1.836-1.489 3.325-3.326 3.325-1.836 0-3.325-1.489-3.325-3.325 0-1.837 1.489-3.325 3.325-3.325zM7.125 3.44c2.12 0 3.838 1.676 3.838 3.744 0 2.067-1.718 3.743-3.838 3.743S3.287 9.25 3.287 7.183c0-2.068 1.718-3.744 3.838-3.744z" transform="translate(-166 -511) translate(0 80) translate(118 395) translate(24 24) translate(24 12)"></path> </svg>') no-repeat center right;
    background-size: 24px;
}

.custom-input-email {
    /*padding-right: 30px;*/
    background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" fit="" width="24" height="24" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 20 20"> <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"/> </svg>') no-repeat center right;
    background-size: 24px;
}

.custom-input-dropdown {
    padding-right: 10px;
    text-align: left;
}

#tabs, #tabs_container {
    background-color: #3b86b5;
    border-radius: 20px;
}



.colData {
    font-weight: 700;
}

#memberSearchTitle, #memberDetailsTitle, #depHeader, #addNewDepTitle {
    font-size: 1.5rem;
}

#dependentsSection {
    margin-top: 35px;
}

#termDate {
    width: 140px;
}

ul li {
    list-style: none;
}

.active-status {
    color: #8bc34a !important;
}

#numOfGroups, #numOfSubscribers, #numOfMembers  {
   color: #3b86b5;
   font-size: 37px;
   font-weight: 600;
}

#numOfActiveDentalSubs, #numOfActiveVisionSubs, #numOfGroups {
   color: #3b86b5;
   font-size: 37px;
   font-weight: 600;

}

   .myBox {
      text-align: center;
      border-top: 2px solid transparent;
      border-image: linear-gradient(0.25turn, rgb(128 128 128),rgb(128 128 128), rgb(128 128 128) );
      border-image-slice: 1;
      width: 100%;
   }

.vertical-alignment-helper {
    display: table;
    height: 100%;
    width: 100%;
    pointer-events: none; /* This makes sure that we can still click outside of the modal to close it */
}

.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width: inherit;
    max-width: inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height: 100%;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

#contactInfoHeader {
    display: inline-block !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: 1px solid #007bff !important;
    color: #ffffff !important;
    background-color: #007bff !important;
    border-radius: 4px !important;
}

.tileheaders {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #007bff;
    color: #ffffff;
    background-color: #007bff;
    border-radius: 4px;
}

.tileheaders:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #ffffff;
}

#contactInfo .contactInfoTable {
    /*background-color: #3b86b5;
                color: white;*/
    /*outline: 2px solid #3b86b5;*/
    border-radius: 20px;
    /*width: auto;*/
    padding: 15px;
    /*margin: 5px;*/
}

#contactInfo .contactInfoTable td {
    background-color: #3b86b5;
    color: white;
    border-radius: 20px;
}

#contactInfo .contactInfoTable th {
    background-color: #3b86b5;
    color: white;
    border-radius: 20px;
    padding: 15px;
}

.secondary-light {
    color: white !important;
    background-color: #3b86b5;
}

#clientInfoAddressBody td {
    background-color: #3b86b5;
    color: white;
    border-radius: 20px;
}

#rightTile {
    background-color: #3b86b5;
    color: white;
    border-radius: 20px;
    padding: 15px;
}

.topTabs {
    margin-left: 40px;
}

#leftTileContainer {
    border-radius: 20px;
}

 