/* pt-sans-regular - latin */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/pt-sans-v12-latin-regular.eot');
    src: local(''), url('fonts/pt-sans-v12-latin-regular.eot?#iefix') format('embedded-opentype'), url('fonts/pt-sans-v12-latin-regular.woff2') format('woff2'), url('fonts/pt-sans-v12-latin-regular.woff') format('woff'), url('fonts/pt-sans-v12-latin-regular.ttf') format('truetype'), url('fonts/pt-sans-v12-latin-regular.svg#PTSans') format('svg');
}

@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/pt-sans-v12-latin-italic.eot');
    src: local(''), url('fonts/pt-sans-v12-latin-italic.eot?#iefix') format('embedded-opentype'), url('fonts/pt-sans-v12-latin-italic.woff2') format('woff2'), url('fonts/pt-sans-v12-latin-italic.woff') format('woff'), url('fonts/pt-sans-v12-latin-italic.ttf') format('truetype'), url('fonts/pt-sans-v12-latin-italic.svg#PTSans') format('svg');
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/pt-sans-v12-latin-700.eot');
    src: local(''), url('fonts/pt-sans-v12-latin-700.eot?#iefix') format('embedded-opentype'), url('fonts/pt-sans-v12-latin-700.woff2') format('woff2'), url('fonts/pt-sans-v12-latin-700.woff') format('woff'), url('fonts/pt-sans-v12-latin-700.ttf') format('truetype'), url('fonts/pt-sans-v12-latin-700.svg#PTSans') format('svg');
}

.spinner {
    /*margin: 100px auto 0;
    width: 70px;
    text-align: center;*/
}

    .spinner > div {
        width: 18px;
        height: 18px;
        background-color: #8f809e;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

/*cube*/
.sk-folding-cube {
    margin: 20px auto;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

    .sk-folding-cube .sk-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

        .sk-folding-cube .sk-cube:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #333;
            -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
            animation: sk-foldCubeAngle 2.4s infinite linear both;
            -webkit-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
        }

    .sk-folding-cube .sk-cube2 {
        -webkit-transform: scale(1.1) rotateZ(90deg);
        transform: scale(1.1) rotateZ(90deg);
    }

    .sk-folding-cube .sk-cube3 {
        -webkit-transform: scale(1.1) rotateZ(180deg);
        transform: scale(1.1) rotateZ(180deg);
    }

    .sk-folding-cube .sk-cube4 {
        -webkit-transform: scale(1.1) rotateZ(270deg);
        transform: scale(1.1) rotateZ(270deg);
    }

    .sk-folding-cube .sk-cube2:before {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .sk-folding-cube .sk-cube3:before {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .sk-folding-cube .sk-cube4:before {
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }

@-webkit-keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

body {
    font-family: "PT Sans", sans-serif;
}

.splash-screen {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    flex-direction: column;
    background-color: #F2F1EF;
}

    .splash-screen h1 {
        font-size: 24px;
        font-weight: bold;
    }

h3 {
    font-weight: bold;
}

html,
body,
#app {
    height: 100%;
}

#login {
    display: flex;
    height: 100%;
}

#login-title {
    background-color: black;
    color: #fff;
    flex: 0 0 50%;
    padding: 40px;
    align-items: center;
    justify-content: center;
    display: flex;
}

#login-form {
    background-color: #F2F1EF;
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    padding: 80px;
}

#login-form-card {
    background-color: white;
    padding: 40px;
}

#login-logo-kantar {
    margin-left: 6px;
}

#login-logo-admin {
    margin-top: 20px;
}

#login-title-card {
    padding-bottom: 150px;
}

#login-form-card {
    padding: 50px;
    width: 520px;
}

    #login-form-card h1 {
        font-weight: bold;
        color: #000;
        font-size: 38px;
        margin-bottom: 20px;
    }

.login-form-row label {
    display: block;
    font-size: 20px;
    color: #666;
    margin-bottom: 8px;
}

.login-form-row input {
    height: 46px;
    width: 100%;
    border: 1px solid black;
    padding: 0 14px;
    outline: none !important;
}

.login-form-row {
    margin-bottom: 10px;
}

.btn {
    position: relative;
}

.btn-primary {
    background-color: black;
    border: 0;
    color: #fff;
    border-radius: 0;
    font-weight: normal;
    font-size: 20px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    padding: 0 30px;
    position: relative;
}

    .btn-primary:hover {
        color: #fff;
        background: black;
    }

#login-form .btn-black {
    margin-top: 14px;
}

.btn-action:hover::after,
.btn-primary:hover::after {
    transform: translateX(0);
    width: 6px;
    transition: all .25s ease-in;
}

.btn-action::after,
.btn-primary::after {
    position: absolute;
    content: "";
    display: block;
    width: 0px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: repeating-linear-gradient(0deg, #e8bb3d, #ffed6a 32%, #b28300 80%, #e8bb3d);
    background-size: 100% 70%;
    background-position-y: 7px;
    will-change: opacity;
    transform: translateX(0px);
    transition: all .25s ease-in;
}

header {
    background-color: #19171D;
    display: flex;
    color: #fff;
    height: 72px;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

#menu-switcher {
    position: absolute;
    background-color: rgba(25, 23, 29, .9);
    height: 400px;
    border-bottom-right-radius: 20px;
    top: 72px;
    left: 0;
    width: 280px;
}

#menu-switcher {
    height: auto;
    padding: 20px 40px;
}

    #menu-switcher a {
        display: inline-flex;
        align-items: center;
        margin-bottom: 20px;
    }

        #menu-switcher a:last-child {
            margin-bottom: 0;
        }

    #menu-switcher img {
        vertical-align: middle;
    }

    #menu-switcher a .icon-svg {
        margin-left: 4px;
    }

#logo img {
    vertical-align: middle;
}

#logo {
    display: inline-flex;
    align-items: center;
}

    #logo .icon-svg {
        margin-left: 10px;
    }

.wrap {
    max-width: 900px;
    margin: 0 auto;
}

.wrap.wrap-fluid {
    max-width: initial;
}

main {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 72px);
}

    main > aside {
        background-color: #F2F1EF;
        flex: 0 0 280px;
        padding: 30px 20px;
    }

    main > #main {
        flex-grow: 1;
        padding: 28px;
        max-width: calc(100vw - 280px);
    }

        main > #main h1 {
            font-weight: bold;
            font-size: 42px;
            margin: 0;
            margin-top: 28px;
            margin-bottom: 40px;
        }

#header-user {
    display: flex;
    align-items: center;
}

.icon-svg img {
    vertical-align: top;
    margin-right: 4px;
}

#user {
    display: flex;
    align-items: center;
}

#header-logout {
    margin-left: 28px;
}

main > aside {
    padding: 30px 20px;
}

aside nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    aside nav ul li a {
        color: #000;
        text-decoration: none;
        height: 38px;
        display: inline-flex;
        align-items: center;
        width: 100%;
        font-size: 18px;
        padding: 0 20px;
    }

        aside nav ul li a.active {
            font-weight: bold;
        }

        aside nav ul li a:hover {
            background-color: rgba(0, 0, 0, .05);
            color: #000;
        }

/* DataGrid - BEGIN */

.datagrid {
    border: 1px solid #E8EAED;
    border-radius: 3px;
    margin-bottom: 20px;
}

.datagrid-table-container {
    overflow-x: auto;
}

.datagrid table {
    --bs-table-hover-bg: #f8f8f8;
    margin-bottom: 0;
}

.datagrid-header {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #E8EAED;
}

.datagrid-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #333842;
}

    .datagrid-button .icon-svg {
        display: inline-flex;
    }

        .datagrid-button .icon-svg img {
            vertical-align: top;
        }

    .datagrid-button .label {
        color: #000;
        margin-left: 4px;
    }

.datagrid table td {
    vertical-align: middle;
}

.datagrid table thead th {
    border-bottom: 2px solid #E8EAED !important;
    height: 48px;
    vertical-align: middle;
    padding: 10px 20px;
}

.datagrid table tbody td {
    padding: 10px 20px;
}

.datagrid-inline-buttons {
    display: flex;
    height: 34px;
    align-items: center;
    justify-content: flex-end;
}

.datagrid-inline-btn {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    margin: 0 4px;
}

    .datagrid-inline-btn img {
        vertical-align: top;
    }

.datagrid-footer {
    background-color: #F9FAFA;
}

.datagrid-footer-pagination {
    display: flex;
    height: 58px;
    align-items: center;
    justify-content: space-between;
}

.datagrid-footer-pagination-buttons {
    padding: 0 20px;
}

.datagrid-footer-pagination-summary {
    padding: 0 20px;
    font-weight: bold;
}

.datagrid-pagination {
    padding: 10px;
    text-decoration: none;
    color: #333842;
    border-radius: 3px;
}

    .datagrid-pagination.active,
    .datagrid-pagination:hover {
        background-color: #BAD8E6;
        color: #005B81;
    }

.datagrid-custom-column-action-groups {
    display: flex;
}

.datagrid-custom-column-action-group {
    margin-right: 14px;
}

    .datagrid-custom-column-action-group:last-child {
        margin-right: 0;
    }

.datagrid-custom-column-action-group-label {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 4px;
}

.datagrid-custom-column-action-group-actions a {
    background-color: #bad8e6;
    color: #005b81;
    font-size: 14px;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 5px;
}

.datagrid tr:hover .datagrid-custom-column-action-group-actions a {

}

    .datagrid tr:hover .datagrid-custom-column-action-group-actions a:hover {
        background-color: #005b81;
        color: #fff;
    }

.notice {
    background-color: #ecfaff;
    padding: 10px 20px;
    border-radius: 5px;
}

.modal-body .datagrid-table-container {
    overflow-y: auto;
    max-height: 400px;
}

.modal-header button {
    border: 0;
    background: none;
    font-size: 48px;
    line-height: 1;
}

.modal-body tr {
    cursor: pointer;
}

.modal-body tr {
    cursor: pointer;
}

.modal-search {
    display: flex;
    align-items: center;
}

    .modal-search input {
        border: 1px solid #ced4da;
        height: 38px;
        padding: 4px 10px;
    }

        .modal-search input:focus {
            outline: none;
        }

    .modal-search a {
        display: inline-flex;
        background-color: #000;
        color: #fff;
        text-decoration: none;
        height: 38px;
        align-items: center;
        padding: 0 14px;
    }

/* DataGrid - END */

/* Trend - BEGIN */

.trend-card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.trend-card {
    border: 1px solid #E8EAED;
    padding: 24px;
    border-radius: 5px;
}

    .trend-card:hover {
        background-color: rgba(0, 0, 0, .02);
        border-color: rgba(0, 0, 0, .1);
    }

    .trend-card p:last-child {
        margin-bottom: 0;
    }

    .trend-card:first-child {
        grid-column: 1 / span 2;
    }

        .trend-card:first-child h3 {
            font-size: 2rem;
        }

    .trend-card span {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 5px;
        font-weight: bold;
        background-color: rgba(0, 0, 0, .07);
        color: #666;
    }

        .trend-card span.trend-up {
            background-color: rgba(30, 198, 89, .1);
            color: #1ec659;
        }

        .trend-card span.trend-down {
            background-color: rgba(242, 81, 41, .05);
            color: #f25129;
        }

/* Trend - END */

/* ButtonCard - BEGIN */

.dashboard-group ul,
.button-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

    .dashboard-group a,
    .button-cards a {
        border: 1px solid #E8EAED;
        color: #333;
        text-decoration: none;
        border-radius: 5px;
        font-size: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
    }

        .dashboard-group a:hover,
        .button-cards a:hover {
            background-color: rgba(0, 0, 0, .02);
            border-color: rgba(0, 0, 0, .1);
        }

/* ButtonCard - END */

/* Dashboard - BEGIN */

#main .dashboard-group h1 {
    font-weight: normal;
}

.dashboard-group p {
    font-size: 24px;
}

.dashboard-group {
    margin-bottom: 40px;
}

    .dashboard-group h2 {
        text-transform: uppercase;
        font-size: 24px;
        margin-bottom: 24px;
    }

    .dashboard-group ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .dashboard-group a {
        width: 100%;
    }

/* Dashboard - END */

/* InputBrowseDialog - BEGIN */

.input-browse-dialog {
    border: 1px solid #ced4da;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.25rem;
    cursor: pointer;
}

.input-browse-dialog-value {
    padding-left: 14px;
}

.input-browse-dialog a {
    margin-left: 24px;
    height: 38px;
    background-color: black;
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    padding: 0 14px;
}

/* InputBrowseDialog - END */


/*CUSTOM CHECKBOX - START*/
.custom-checkbox {
    position: relative;
    cursor: pointer;
    margin-right: 8px;
}

    .custom-checkbox:before {
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 0;
        left: 0;
        border-radius: 3px;
        background-color: #e9e9e9;
    }

    .custom-checkbox:checked:before {
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 0;
        left: 0;
        background-color: #333;
    }

    .custom-checkbox:checked:after {
        content: "";
        display: block;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        top: 4px;
        left: 7px;
    }
/*CUSTOM CHECKBOX - END*/