/* CH Custom css*/
:root {
    /* Colors: */
    --black: #000000;
    --white: #FFFFFF;

    /* Rebrand Colors */
    --brand-1: #532297;                 /* Cannot be text */
    --brand-1-light: #9BA1D8;           /* AA header text, AAA paragraph (cannot be on -bg-light */
    --brand-1-medium: #828ABC;          /* Cannot be text */

    --brand-2: #B5E18E;                 /* AAA Text NEW AKSHAY GREEN */
    --brand-2-dark: #AACD7F;            /* AA Text */
    --akshay-green: var(--brand-2);

    --brand-1-gradient: linear-gradient(90deg, rgba(83,34,135,1) 0%, rgba(61,201,209,1) 100%);
    --brand-2-gradient: linear-gradient(90deg, rgba(181,225,142,1) 0%, rgba(61,201,209,1) 100%);
    
    --brand-3: #5DC9D1;                 /* AA Text (cannot be used on bg-light) */
    --brand-3-dark: #319DA8;            /* Cannot be text */

    --accent-1: #386CB9;                /* Cannot be text */
    --accent-1-dark: #26497E;           /* Cannot be text */

    --alert: #FCC100;                   /* AAA Text */
    --alert-text: #FFD447;              /* AA Text */
    --rgb-alert: 255, 212, 71;

    --fault-warning: #C33149;           /* Cannot be text */
    --fault-warning-text: #EBADB8;      /* AA Text */
    --rgb-warning: 195, 49, 7;
    --error-warning: #C33149;

    --bg-rgb: 48, 53, 63; /* #30353F */
    --bg: rgb(var(--bg-rgb));             /* Not intended to be text */
    --bg-medium-rgb: 61, 66, 76; /* #3D424C */
    --bg-medium: rgb(var(--bg-medium-rgb));
    --bg-dark: #1F252E;
    --bg-light: #464E5D;
    
    --hyperlink-text: #ACDDE7;          /* AAA text hyperlink */
    --input-disabled-text: #737373;     /* Both are AAA header text, AA paragraph */
    --disabled-text: #DBDBDB;
}

body {
    background-color: var(--bg);
    color: var(--white);
}

/* logos */

.logo-medsitter {
    background-image: url('/imgs/angelfish/logo-white-copyright.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 45px;
    width: 193px;
    border: none;
}

.logo-medsitter.white {
    background-image: url('/imgs/collette/logo-white.svg');
}

.logo-medsitter.white.large {
    height: 100px;
    width: 400px;
}

.medsitter-dropdown-menu {
    background-color: var(--bg-dark);
    border: 1px solid var(--brand-1-light);
    border-radius: 0px;
    padding: 0px;
    width: 150px;
    text-align: left;
    z-index: 1000;
    position: absolute;
}

.dropdown-profile {
    right: 30px;
    top: 58px;
}

.medsitter-dropdown-menu > a:hover {
    background-color: var(--bg-medium) !important;
}

/* changes to simple-code-editor */
.header .dropdown {
    display: none !important;
}

.copy_code > .tooltip {
    opacity: 1 !important;
}

/* buttons */

.medsitter-buttons {
    border: 1px solid var(--brand-1-light);
    color: var(--white);
    background-color: var(--bg);
    border-radius: 0;
}

.medsitter-buttons-transparent {
    background-color: transparent;
}

.medsitter-buttons:hover {
    background-color: var(--brand-1-light);
    color: var(--white);
    cursor: pointer;
}

.medsitter-buttons:focus {
    outline: none !important;
    background-color: var(--brand-1-medium);
}

.btn-login {
    cursor: pointer;
    border: none;
    background-color: var(--brand-3-dark);
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    margin: 4px 2px;
    border-radius: 28px;
    width: 288px;
    height: 60px;
    padding: 14px;
    outline: none !important;
}

.close-btn {
    color: var(--brand-1-light);
    cursor: pointer;
}

.medsitter-circle-dropdown {
    align-items: center;
    background-color: var(--hyperlink-text);
    border-color: var(--hyperlink-text);
    border-radius: 50%;
    border-style: hidden;
    color: var(--bg);
    display: flex;
    font-size: 1.125rem;
    font-weight: 500;
    height: 2.5rem;
    justify-content: center;
    letter-spacing: 0.75px;
    width: 2.5rem;
    top: 16px;
    right: 30px;
    position: absolute;
  }

/* fonts */

.font-14 {
    font-size: 14px;
}

.font-16 {
    font-size: 16px;
}

.font-24 {
    font-size: 24px;
}

.font-37 {
    font-size: 37px;
}

.opensans {
    font-family: 'OpenSans', sans-serif !important;
    font-weight: 400 !important;
}

/* icons */

.fa-exclamation-triangle {
    color: var(--brand-light-gold-lighter);
}