body {
    background-color: white;
}

body:fullscreen, body::backdrop {
    background-color: black !important;
}


:root {
    --primary: #203650;
    --siteview-primary-on-white: #265081;
    --siteview-secondary: #798696;
    --siteview-light-blue-on-white: #1B8EDB;
    --siteview-light-blue-on-black: #7FC8F8;
    --success: #165931;
    --warning: #fdb10c;
    --danger: #9e021d;
}

.bg-siteview-primary {
    background-color: var(--siteview-primary-on-white);
}
.bg-siteview-primary:hover {
    background-color:  var(--siteview-light-blue-on-white);
}

.login-sidebar {
    background: var(--primary); /* fallback for old browsers */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='600' height='300' preserveAspectRatio='none' viewBox='0 0 1024 1024'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1018%26quot%3b)' fill='none'%3e%3cpath d='M-43.44 824.24C78.34 818.54 158.01 602.43 394.24 609.2 630.47 615.97 663.41 1117.7 831.92 1181.11' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-45.84 103.41C111.6 129.22 165.09 414.1 443.53 513.01 721.97 611.92 574.04 943.78 688.21 1029.79' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-54.04 485.57C83 470.2 130.07 143.88 397.05 168.13 664.03 192.38 642.18 921.66 848.14 1065.14' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-6.39 194.23C110.67 259.3 34.74 529.84 266.87 655.03 498.99 780.22 425.07 1036.44 540.12 1096.57' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-166.15 354.86C14.25 391.6 97.74 795.68 372.89 856.62 648.04 917.56 547.68 1115.88 642.41 1140.31' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1018'%3e%3crect width='1024' height='1024' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-position: bottom;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.welcome-page-background {
    background: var(--primary); /* fallback for old browsers */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='600' height='300' preserveAspectRatio='none' viewBox='0 0 1024 1024'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1018%26quot%3b)' fill='none'%3e%3cpath d='M-43.44 824.24C78.34 818.54 158.01 602.43 394.24 609.2 630.47 615.97 663.41 1117.7 831.92 1181.11' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-45.84 103.41C111.6 129.22 165.09 414.1 443.53 513.01 721.97 611.92 574.04 943.78 688.21 1029.79' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-54.04 485.57C83 470.2 130.07 143.88 397.05 168.13 664.03 192.38 642.18 921.66 848.14 1065.14' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-6.39 194.23C110.67 259.3 34.74 529.84 266.87 655.03 498.99 780.22 425.07 1036.44 540.12 1096.57' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-166.15 354.86C14.25 391.6 97.74 795.68 372.89 856.62 648.04 917.56 547.68 1115.88 642.41 1140.31' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1018'%3e%3crect width='1024' height='1024' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-position: bottom;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.welcome-card {
    max-width: 42rem;
    background-color: #ffffff;
    border-radius: 2rem;
    border: 1px solid rgb(213, 213, 213);
}

.nav-link {
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: 200px;
}

.navbar-light .navbar-nav .nav-item.active .nav-link {
    background-color: var(--primary);
    color: white;
}

.navbar-light .navbar-nav .nav-item:hover .nav-link {
    background-color: var(--siteview-light-blue-on-white);
    color: white;
}

.navbar-brand {
    transition: all 0.2s ease;
    cursor: pointer
}

.navbar-brand:hover {
    transform: scale(1.09)
}

@media (min-width: 768px) {
    .navbar {
        border-bottom: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgb(199, 211, 229);
    }

    .webclient-container {
        max-height: calc(100% - 40px);
    }
}

.is-invalid .invalid-feedback {
    display: block;
}

.hover-image {
    transition: .5s ease;
    backface-visibility: hidden;
}

.hover-image-container {
    position: relative;
}

.hover-image-center-btn {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2.5rem;
    color: var(--siteview-light-blue-on-white);
}

.hover-image-container:hover .hover-image {
    opacity: 0.3;
    cursor: pointer;
}

.hover-image-container:hover .hover-image-center-btn {
    opacity: 1;
    cursor: pointer;
}

.mail-activity-card {
    max-width: 40rem;
    padding: 1rem;
    padding-left: 1.25rem;
    border-radius: 2rem;
    word-break: break-word;
    background-color: var(--primary);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    color: white;
}

.mail-activity-card:hover {
    box-shadow: 5px 6px 10px 0 #84b4fa;
    transform: scale(1.024)
}

.mail-template-card {
    max-width: 50rem;
    padding: 1rem;
    padding-left: 1.25rem;
    border-radius: 2rem;
    word-break: break-word;
    background-color: var(--primary);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    color: white;
}

.mail-template-card:hover {
    box-shadow: 5px 6px 10px 0 #84b4fa;
    transform: scale(1.024)
}

.dashboard-card {
    max-width: 32rem;
    padding: 1rem;
    padding-left: 1.25rem;
    border-radius: 2rem;
    overflow: hidden;
    background-color: var(--primary);
    transition: all 0.2s ease;
    height: 100%;
    color: white;
}

.dashboard-card:hover {
    box-shadow: 5px 6px 10px 0px #a7c2ea;
    transform: scale(1.024)
}

.product-card {
    padding: 1rem;
    border-radius: 2rem;
    overflow: hidden;
}

.project-card {
    padding: 1rem;
    border-radius: 2rem;
    overflow: hidden;
    background-color: var(--primary);
    transition: all 0.2s ease;
}

@media (max-width: 992px) {
    .project-card {
        max-width: 26rem;
    }

    .product-card {
        max-width: 26rem;
    }
}

@media (min-width: 1400px) {
    .project-card {
        padding: 2rem;
    }

}

.project-card:hover {
    box-shadow: 5px 6px 10px 0px #a7c2ea;
    transform: scale(1.024)
}

.project-card .img-cover {
    object-fit: cover;
    object-position: center;
    box-shadow: 0px 5px 50px 0px rgb(127, 200, 248), 0px 0px 0px 2px rgb(127, 200, 248);
}

.project-card .company-name {
    color: var(--siteview-light-blue-on-black);
}

.project-card.inactive {
    opacity: 60%;
    cursor: not-allowed;
}

.project-card.secondary {
    background-color: var(--siteview-secondary);
}

.display-on-card-hover {
    display: none;
}

.project-card.secondary:hover {
    background-color: var(--primary);
}

.project-card.secondary:hover .hide-on-card-hover {
    display: none;
}

.project-card.secondary:hover .display-on-card-hover {
    display: block;
}

.ribbon-date {
    width: 170px;
    height: 38px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: var(--siteview-secondary);
    transform: rotate(45deg);
    position: absolute;
    right: -40px;
    top: 26px;
    padding-top: 6px;
}

.ribbon-date.new {
    background: var(--success);
}

.ribbon-date.over {
    background: var(--danger);
}

.ribbon-role {
    left: 25px;
    top: 20px;
    font-size: 20px;
    text-align: center;
    color: #ffffff;
    position: absolute;
}

.ribbon-role.manager {
    color: #D4AF37;
}

.ribbon-role.member {
    color: lightgray;
}

.btn-siteview-primary {
    background-color: var(--primary);
    color: var(--siteview-light-blue-on-black);
    padding: 7px 20px;
    text-decoration: none;
    border-radius: 50px;
    align-items: center;
    justify-content: left;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-siteview-primary:hover, .btn-siteview-primary:focus, .btn-siteview-primary:active, .btn-siteview-primary.active {
    color: white;
    background-color: var(--siteview-light-blue-on-white);
}

.btn-siteview-secondary {
    background-color: #4a4f53;
    color: white;
    padding: 7px 20px;
    text-decoration: none;
    border-radius: 50px;
    align-items: center;
    justify-content: left;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-siteview-secondary:hover, .btn-siteview-secondary:focus, .btn-siteview-secondary:active, .btn-siteview-secondary.active {
    color: black;
    background-color: #d5d8da;
}

.btn-siteview-success {
    background-color: var(--success);
    color: #f6f2d5;
    padding: 7px 20px;
    text-decoration: none;
    border-radius: 50px;
    align-items: center;
    justify-content: left;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-siteview-success:hover, .btn-siteview-success:focus, .btn-siteview-success:active, .btn-siteview-success.active {
    color: black;
    background-color: #96d6b0;
}

.btn-siteview-danger {
    background-color: var(--danger);
    color: #f6f2d5;
    padding: 7px 20px;
    text-decoration: none;
    border-radius: 50px;
    align-items: center;
    justify-content: left;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-siteview-danger:hover, .btn-siteview-danger:focus, .btn-siteview-danger:active, .btn-siteview-danger.active {
    color: black;
    background-color: rgb(225, 87, 112);
}

.button-camera-select {
    background-color: #7FC8F8;
    color: white;
    text-decoration: none;
    border-radius: 58px;
    height: 58px;
    display: flex;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 6px;
    margin-right: 20px;
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
    justify-content: left;
    overflow: hidden;
    width: auto;
    min-width: 58px;
    max-width: 58px; /** I'm animating max-width because width needs to be auto, and auto can't be animated **/
    -webkit-transition: max-width 0.3s;
    transition: max-width 0.3s;
}

.button-camera-select.active {
    background-color: var(--primary);
    border-radius: 73px;
    height: 73px;
    min-width: 73px;
    max-width: 73px;
    margin-left: 0;
}

.button-camera-select.active .icon {
    padding: 0 7px;
}


.button-camera-select.disabled {
    background-color: #909ba8;
    cursor: default;
}

.button-camera-select .icon {
    padding: 0 3px;
    display: flex;
    align-items: center;
}

.button-camera-select .text {
    display: flex;
    white-space: nowrap;
    padding: 15px;
}


.button-camera-select:hover {
    color: white;
    max-width: 500px;
    overflow: visible;
}


.toastify {
    --background-rgb: 255, 255, 255;
    --background-alpha: 0.96;
    background: rgba(var(--background-rgb), var(--background-alpha));
    max-width: 450px;
    margin: 10px 10px 10px 20px;
    padding: 8px 8px 8px 8px;
    font-size: 0.95rem;
    color: #000000;
    cursor: auto;
    pointer-events: auto;
    background-clip: padding-box;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    border: 3px solid transparent;
}

.toastify:hover {
    --background-alpha: 1;
    .toast-close {
        opacity: 1;
    }
}

.toast-close {
    background: white;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: lighter;
    color: #5a5a5a;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    top: -0.9rem;
    right: -0.9rem;
    transition: opacity 0.2s ease;
    opacity: 0;
    @media (max-width: 767px) {
        opacity: 1 !important;
    }
}

.toastify-avatar {
    width: 1.5em;
    height: 1.5em;
    padding-right: 0.4rem;
    padding-left: 0;
}

.toastify-success {
    background: linear-gradient(rgba(var(--background-rgb), var(--background-alpha)), rgba(var(--background-rgb), var(--background-alpha))) padding-box,
    linear-gradient(45deg, #00f260, #0575e6) border-box;

}

.toastify-info {
    background: linear-gradient(rgba(var(--background-rgb), var(--background-alpha)), rgba(var(--background-rgb), var(--background-alpha))) padding-box,
    linear-gradient(45deg, #00dbde, #2618f3) border-box;
}

.toastify-danger {
    background: linear-gradient(rgba(var(--background-rgb), var(--background-alpha)), rgba(var(--background-rgb), var(--background-alpha))) padding-box,
    linear-gradient(45deg, #c31432, #fdb10c) border-box;

}

.gridjs .gridjs-table {
    width: auto;
    min-width: 100%;
}

.gridjs .gridjs-th {
    padding: 14px 10px;
}

.gridjs .gridjs-td {
    padding: 3px 12px;
}


.row-click-table {
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th {
        border: 1px solid #ddd;
        border-bottom: 2px solid #ddd;
        background-color: #f2f2f2;
        padding: 8px;
    }

    tbody td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    tbody tr.clickable-row {
        transition: background 0.15s ease;
        cursor: pointer;
    }

    tbody tr.clickable-row:hover {
        background: var(--siteview-light-blue-on-black);
    }

    ::selection {
    background: var(--siteview-secondary);
    color: white; /* Set the color of the selected text */
    }

    tbody tr[visible='false'],
    .no-result {
        display: none;
    }

    tbody tr[visible='true'],
    .no-result {
        display: table-row;
    }

    .counter {
        color: #ccc;
    }
}