/**
 *
 * Sonar Dark Rye Theme
 * An override of the Bootstrap base theme
 * 
*/

/* variables */

:root {
    --colors--neutral--black1: #021627;
    --colors--neutral--grey1: #162737;
    --colors--neutral--grey2: #212B39;
    --colors--neutral--grey3: #4a5a68;
    --colors--neutral--grey4: #909dad;
    --colors--neutral--white1: #ffffff;
    --colors--neutral--white3: #edeff2;
    --colors--primary-bright: #2cbfff;
    --colors--primary: #2cbfff;
    --colors--primary0: #0d75bf;
    --colors--primary4: #d5e7f0;
    --colors--primary2: #165f7f;
    --colors--primary3: #095280;
    --colors--primary5: #1e9c64;
    --colors--primary6: #47a889;
    
    --colors--positive: #1e9c64;
    --colors--danger: #ff1a56;
    --colors--warning: #ff9536;
    
    --colors--neutral--grey3-transparent: rgba(74, 90, 104, 0.45);
    --colors--primary-gradient: linear-gradient(200deg, #2cbfff, #2caaff); /* #2cbfff, #0d75bf */
    
    --bg--gradient1: linear-gradient(200deg, rgba(85, 103, 119, 0.95), rgba(85, 89, 119, 0.95));
    --bg--transparent--light: rgba(255,255,255, 0.1);
    --bg-border-radius: .3rem;

    /* CSS var() cannot be used @media queries, therefore we must use the actual values */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}


/* typography */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100;
    src: url("../../assets/fonts/interFont/Inter-Thin-BETA.woff2") format("woff2"), url("../../assets/fonts/interFont/Inter-Thin-BETA.woff") format("woff"); }
  
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url("../../assets/fonts/interFont/Inter-Regular.woff2") format("woff2"), url("../../assets/fonts/interFont/Inter-Regular.woff") format("woff"); }
  
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    src: url("../../assets/fonts/interFont/Inter-Italic.woff2") format("woff2"), url("../../assets/fonts/interFont/Inter-Italic.woff") format("woff"); }
  
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url("../../assets/fonts/interFont/Inter-SemiBold.woff2") format("woff2"), url("../../assets/fonts/interFont/Inter-SemiBold.woff") format("woff"); }
  
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 600;
    src: url("../../assets/fonts/interFont/Inter-SemiBoldItalic.woff2") format("woff2"), url("../../assets/fonts/interFont/Inter-SemiBoldItalic.woff") format("woff"); }
  
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url("../../assets/fonts/interFont/Inter-Bold.woff2") format("woff2"), url("../../assets/fonts/interFont/Inter-Bold.woff") format("woff"); }
  
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 700;
    src: url("../../assets/fonts/interFont/Inter-BoldItalic.woff2") format("woff2"), url("../../assets/fonts/interFont/Inter-BoldItalic.woff") format("woff"); }
  

/* misc */

html {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    scroll-behavior: smooth;
}
a {
    color: var(--colors--primary);
}
hr {
    border-color: var(--colors--neutral--grey3);
}
.blockquote-footer {
    color: var(--colors--neutral--white3);
    margin-top: 10px;
}


/* theme */

body.sonar-darkrye {
    background-color: var(--colors--neutral--black1);
    color: var(--colors--neutral--grey3);
    font-family: var(--text--font--family);
}
.sonar-darkrye [data-label] {
    background: var(--colors--primary4);
    border-radius: 2px;
    color: var(--colors--neutral--grey2);
    margin: 0 5px;
    padding: 1px 4px;
}


/* animations */

@keyframes button--pulse {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.85;
    }
}


/* badge */

.sonar-darkrye .badge {
    background: var(--colors--primary4);
    border: 1px solid rgba(34, 44, 58, 0.085);
    color: var(--colors--neutral--grey2);
}
.sonar-darkrye .badge-primary {
    background-color: var(--colors--primary3);
}
.sonar-darkrye .badge-secondary {
    background-color: var(--colors--neutral--grey3);
    font-weight: 500;
}


/* form */

.sonar-darkrye .form {}
.sonar-darkrye .form__header {}
.sonar-darkrye .form__footer {}
.sonar-darkrye .form {
    padding: 2rem;
}


/* form-inline */

.sonar-darkrye .form-inline .form__body {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
}
.sonar-darkrye .form-inline {
    padding: 0;
}


/* form-standard */

.sonar-darkrye .form-standard {
    background-color: var(--colors--neutral--grey1);
    border-radius: var(--bg-border-radius);
    color: var(--colors--neutral--grey4);
    margin-bottom: 2rem;
    padding: 3rem 2rem;
}


/* input */

.sonar-darkrye .form-inline .form-control,
.sonar-darkrye .form-standard .custom-select,
.sonar-darkrye .form-standard .form-control,
.sonar-darkrye .form-signin input {
    background: var(--colors--neutral--grey2);
    color: var(--colors--neutral--grey4);
}
.sonar-darkrye .form-inline .form-control:not(.is-valid):not(.is-invalid),
.sonar-darkrye .form-standard .custom-select:not(.is-valid):not(.is-invalid),
.sonar-darkrye .form-standard .form-control:not(.is-valid):not(.is-invalid),
.sonar-darkrye .form-signin input {
    border-color: var(--colors--neutral--grey3);
}
.sonar-darkrye .form-inline .input-group-text,
.sonar-darkrye .form-standard .input-group-text {
    background-color: var(--colors--neutral--grey3);
    border-color: transparent;
    color: var(--colors--neutral--grey4);
}
.sonar-darkrye .form-inline .form-control-file,
.sonar-darkrye .form-standard .form-control-file,
.sonar-darkrye .form-inline .input[type="file"],
.sonar-darkrye .form-standard .input[type="file"] {
    background-color: var(--colors--neutral--grey2);
    border: solid 1px var(--colors--neutral--grey3);
    padding: 10px;
    border-radius: .25rem;
}

.sonar-darkrye .form-standard .custom-file-label,
.sonar-darkrye .form-inline .custom-file-label {
    background: var(--colors--neutral--grey2);
    color: var(--colors--neutral--grey4);
}
.sonar-darkrye .form-standard .custom-file-label::after,
.sonar-darkrye .form-inline .custom-file-label::after {
    background: var(--bg--gradient1);
    border-color: var(--colors--neutral--grey3);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .form-standard .input-group-append button,
.sonar-darkrye .form-inline .input-group-append button {
    background: var(--colors--primary-gradient);
    border-color: var(--colors--primary-bright);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .form-inline .input-group-append button:hover,
.sonar-darkrye .form-inline .input-group-append button:focus,
.sonar-darkrye .form-inline .input-group-append .btn:hover,
.sonar-darkrye .form-inline .input-group-append .btn:focus,
.sonar-darkrye .form-standard .input-group-append button:hover,
.sonar-darkrye .form-standard .input-group-append button:focus,
.sonar-darkrye .form-standard .input-group-append .btn:hover,
.sonar-darkrye .form-standard .input-group-append .btn:focus {
    outline: none;
    animation: button--pulse 1s infinite alternate;
    background: var(--colors--primary-gradient);
    border-color: var(--colors--primary-bright);
}


/* button primary */

.sonar-darkrye .btn-link {
    color: var(--colors--primary0);
}
.sonar-darkrye .btn-link:hover,
.sonar-darkrye .btn-link:focus,
.sonar-darkrye .btn-link:active {
    color: var(--colors--primary);
}
.sonar-darkrye .btn-primary {
    background: var(--colors--primary-gradient);
    border-color: var(--colors--primary-bright);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .btn-primary:focus,
.sonar-darkrye .btn-primary:hover {
    background: var(--colors--primary-gradient);
    border-color: var(--colors--primary-bright); 
}
.sonar-darkrye button:hover,
.sonar-darkrye button:focus,
.sonar-darkrye .btn:hover,
.sonar-darkrye .btn:focus {
    outline: none;
    animation: button--pulse 1s infinite alternate;
}
.sonar-darkrye .btn--submit {
    background: var(--colors--primary-gradient);
    border-color: var(--colors--primary-bright);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .btn--submit:hover {
    background: var(--colors--primary-gradient);
    border-color: var(--colors--primary-bright);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .btn,
.sonar-darkrye .btn--submit,
.sonar-darkrye .btn--cancel {
    font-size: 1rem;
    height: 38px;
    line-height: 35px;
    padding: 0 2rem;
}
.sonar-darkrye .btn--icon {
    align-items: baseline;
    padding: 0 1rem;
}
.sonar-darkrye .btn--icon .bi {
    margin-bottom: 4px;
}
.sonar-darkrye .btn-primary:not(:disabled):not(.disabled).active,
.sonar-darkrye .btn-primary:not(:disabled):not(.disabled):active,
.sonar-darkrye .show > .btn-primary.dropdown-toggle {
    background: var(--colors--primary0);
    border-color: var(--colors--primary-bright);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .btn-outline-primary {
    border-color: var(--colors--primary-bright);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .btn-outline-primary:hover {
    background: var(--colors--primary-gradient);
    border-color: var(--colors--primary-bright);
    color: var(--colors--neutral--white3); 
}
.sonar-darkrye .btn-primary.disabled,
.sonar-darkrye .btn-primary:disabled {
    background: var(--colors--primary-gradient);
    border-color: var(--colors--primary-bright);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .btn.disabled,
.sonar-darkrye .btn:disabled {
    cursor: not-allowed;
}


/* button secondary */

.sonar-darkrye .btn-secondary {
    background: var(--bg--gradient1);
    border-color: var(--colors--neutral--grey3);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .btn-secondary:focus,
.sonar-darkrye .btn-secondary:hover {
    border-color: var(--colors--neutral--grey3); 
}
.sonar-darkrye .btn-secondary:not(:disabled):not(.disabled).active,
.sonar-darkrye .btn-secondary:not(:disabled):not(.disabled):active,
.sonar-darkrye .show > .btn-secondary.dropdown-toggle {
    background: var(--colors--neutral--grey2);
    border-color: var(--colors--neutral--grey3);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .form-inline .btn-outline-secondary,
.sonar-darkrye .form-standard .btn-outline-secondary {
    border-color: var(--colors--neutral--grey3);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .form-inline .btn-outline-secondary:hover,
.sonar-darkrye .form-standard .btn-outline-secondary:hover {
    background: var(--bg--gradient1);
    border-color: var(--colors--neutral--grey3);
    color: var(--colors--neutral--white3); 
}
.sonar-darkrye .btn-secondary.disabled,
.sonar-darkrye .btn-secondary:disabled {
    background: var(--bg--gradient1);
    border-color: var(--colors--neutral--grey3);
    color: var(--colors--neutral--white3);
}


/* button info */

.sonar-darkrye .btn-info {
    background-color: var(--colors--primary6);
    border-color: var(--colors--primary6);
    color: var(--colors--neutral--white3);
}
.sonar-darkrye .btn-info:hover {
    background-color: var(--colors--primary6);
    border-color: var(--colors--primary6);
}
.sonar-darkrye .btn-outline-info {
    border-color: var(--colors--primary6);
    color: var(--colors--primary6);
}
.sonar-darkrye .btn-outline-info:hover {
    background-color: var(--colors--primary6);
    border-color: var(--colors--primary6);
    color: var(--colors--neutral--white3);
}


/* button success */

.sonar-darkrye .btn-success {
    background-color: var(--colors--positive);
    border-color: var(--colors--positive);
}
.sonar-darkrye .btn-success:hover {
    background-color: var(--colors--positive);
    border-color: var(--colors--positive);
}
.sonar-darkrye .btn-outline-success {
    border-color: var(--colors--positive);
    color: var(--colors--positive);
}

.sonar-darkrye .btn-outline-success:hover {
    background-color: var(--colors--positive);
    border-color: var(--colors--positive);
    color: var(--colors--neutral--white3);
}


/* button danger */

.sonar-darkrye .btn-danger {
    background-color: var(--colors--danger);
    border-color: var(--colors--danger);
}
.sonar-darkrye .btn-danger:hover {
    background-color: var(--colors--danger);
    border-color: var(--colors--danger);
}
.sonar-darkrye .btn-outline-danger {
    border-color: var(--colors--danger);
    color: var(--colors--danger);
}
.sonar-darkrye .btn-outline-danger:hover {
    background-color: var(--colors--danger);
    border-color: var(--colors--danger);
    color: var(--colors--neutral--white3);
}


/* button warning */

.sonar-darkrye .btn-warning {
    background-color: var(--colors--warning);
    border-color: var(--colors--warning);
}
.sonar-darkrye .btn-warning:hover {
    background-color: var(--colors--warning);
    border-color: var(--colors--warning);
}
.sonar-darkrye .btn-outline-warning {
    border-color: var(--colors--warning);
    color: var(--colors--warning);
}
.sonar-darkrye .btn-outline-warning:hover {
    background-color: var(--colors--warning);
    border-color: var(--colors--warning);
    color: var(--colors--neutral--black1);
}


/* george */

.sonar--branding {
    margin-bottom: 5vh;
}
.sonar--branding .sonar--logo {
    height: 60px;
}
.sonar--branding .sonar--logo--text {
    color: var(--colors--neutral--white1);
    font-size: 40px;
    font-weight: normal;
    margin: -5px 0 0 7px;
}

@media (max-width: 992px) {
    .sonar--branding {
        margin-bottom: 3vh;
    }
    .sonar--branding .sonar--logo {
        height: 40px;
    }
    .sonar--branding .sonar--logo--text {
        font-size: 30px;
    }
}


/* toast */

.sonar-darkrye.toast {}
.sonar-darkrye.toast-header {
    background-color: var(--colors--neutral--white1);
    color: var(--colors--neutral--grey3);
}
.sonar-darkrye.toast-header .brand-logo {
    width: 20px;
}


/* modal */

.sonar-darkrye .modal-content {
    border: 0;
}
.sonar-darkrye .modal-header {
    align-items: center;
    background: var(--colors--neutral--grey1);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: var(--colors--neutral--white1);
    display: flex;
    justify-content: space-between;
    padding: 1rem 3rem;
}
.sonar-darkrye .modal-header .close {
    color: var(--colors--neutral--white1);
    font-size: 2.75rem;
    margin: -1rem -1rem -1rem auto;
    padding: 1rem 1rem;
}
.sonar-darkrye .modal-title {
    font-size: 30px;
    line-height: 1.5;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    text-transform: capitalize;
}
.sonar-darkrye .modal-body {
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.1);
    background: var(--colors--neutral--white3);
}
.sonar-darkrye .modal-dialog {
    max-width: 968px;
    width: 100%;
}
.sonar-darkrye .modal-footer {
    background: var(--colors--neutral--black1);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 1.5rem;
}
.sonar-darkrye .modal-footer .btn {
    margin-right: 20px;
}

.sonar-darkrye .modal-footer .btn:last-child {
    margin-right: 0;
}

.sonar-darkrye .close {
    color: var(--colors--neutral--white3);
    font-weight: 300;
}
.sonar-darkrye .close:hover {
    color: var(--colors--neutral--white3);
}


/* table */

.sonar-darkrye .table {
    border-radius: var(--bg-border-radius);
    color: var(--colors--neutral--grey4);
}
.sonar-darkrye .table-hover tbody tr:hover {
    background-color: var(--colors--neutral--grey2);
    color: var(--colors--neutral--grey4);
}
.sonar-darkrye .table td,
.sonar-darkrye .table th {
    border-top: 1px solid var(--colors--neutral--grey3);
    vertical-align: middle;
}
.sonar-darkrye .table th {
    color: var(--colors--neutral--white1);
}
.sonar-darkrye .table thead th {
    border-bottom-width: 1px;
    vertical-align: middle;
}


/* nav pill */

.sonar-darkrye .nav-pills .nav-link,
.sonar-darkrye .nav-pills .show > .nav-link {
    align-items: center;
    background: rgba(44, 191, 255, 0);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(144, 157, 173, 0.5);
    border-radius: 25px;
    color: var(--colors--neutral--grey3);
    display: inline-flex;
    justify-content: center;
    padding: 10px 30px;
    margin: 0 5px 10px 5px;
    text-align: center;
    transition: background 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9), border-color 0.15s cubic-bezier(0.2, 0.3, 0.25, 0.9);
}
.sonar-darkrye .nav-pills .nav-link:hover,
.sonar-darkrye .nav-pills .show > .nav-link:hover {
    background: var(--colors--neutral--grey3-transparent);
    border-color: var(--colors--neutral--grey3);
    color: var(--colors--neutral--white1);
}
.sonar-darkrye .nav-pills .nav-link.active {
    background: var(--bg--gradient1);
    border-color: var(--colors--neutral--grey3);
    color: var(--colors--neutral--white1);
}


/* breadcrumb */

.sonar-darkrye .breadcrumb {
    background-color: var(--colors--neutral--grey1);
    color: var(--colors--neutral--grey3);
}
.sonar-darkrye .breadcrumb a {
    color: var(--colors--neutral--grey3);
}


/* pagination */

.sonar-darkrye .page-link {
    background-color: var(--colors--neutral--grey1);
    border-color: var(--colors--neutral--grey2);
    color: var(--colors--neutral--grey4);
    padding: .5rem 1rem;
}
.sonar-darkrye .page-link:hover {
    background-color: var(--colors--neutral--grey3);
    border-color: var(--colors--neutral--grey2);
    color: var(--colors--neutral--grey1);
}


/* progress bar */

.sonar-darkrye .progress {
    background-color: var(--colors--neutral--grey2);
}


/* jumbotron */

.jumbotron {
    background-color: var(--colors--neutral--grey1);
    color: var(--colors--neutral--grey4);
}


/* toast: notification */

.sonar-darkrye .toast {
    border-radius: var(--bg-border-radius);
    overflow: hidden;
}
.sonar-darkrye .toast-body {
    background: var(--colors--primary4);
}
.sonar-darkrye .toast-header {
    background-color: var(--colors--neutral--grey1);
    color: var(--colors--neutral--grey4);
}


/* card--error */

.sonar-darkrye .card--error {
    background-color: var(--colors--neutral--grey1);
    border-radius: var(--bg-border-radius);
    color: var(--colors--neutral--grey4);
    overflow: hidden;
    margin: 30vh auto;
    max-width: 800px;
}
.sonar-darkrye .card--error .card-top {
    overflow: hidden;
    padding: 40px;
    position: relative;
}
.sonar-darkrye .card--error .card-top .bi {
    font-size: 534px;
    display: block;
    position: absolute;
    top: -229px;
    right: -256px;
    opacity: 0.1;
    transform: rotate(32deg);
}
.sonar-darkrye .card--error .card-body {
    background-color: var(--colors--neutral--black1);
    color: var(--colors--neutral--white4);
    padding: 40px;
}

@media (max-width: 992px) {
    .sonar-darkrye .card--error .card-top .display-3 {
        font-size: 2.5rem;
    }
    .sonar-darkrye .card--error .card-top {
        padding: 30px;
    }
    .sonar-darkrye .card--error .card-body {
        padding: 30px;
    }
}