/*general section*/

:root {
    --color-violet: #7d3f98;
    --color-brightviolet: #8932af;
    --color-darkviolet: #65347d;
    --color-violet-tint: #b18cc1;
    --color-cranberry: #d20962;
    --color-cranberry-tint: #e46b95;
    --color-teal: #00a78e;
    --color-teal-tint: #66cabb;
    --color-violet-deep: #aa0061;
    --color-violet-light: #b9afd6;
    --color-cranberry-deep: #aa0061;
    --color-cranberry-light: #e5b2cf;
    --color-teal-deep: #007d82;
    --color-teal-light: #b2dae1;
    --color-cranberry-dark: #d80b6d;
    --color-cranberry-dark-hover: #811a4a;
    --color-light-violet: #a073b2;
    --color-purple: #8932af;
    --color-light-purple: #c0a4cc;
    --color-darkviolet2: #5a2e6f;
    --color-light-gray: #f5f6f6;
    --color-light-gray-3: #c0c0c0;
    --color-grey-1: #f5f5f5;
    --color-grey-2: #dcdcdc;
    --color-grey-3: #bebebe;
    --color-grey-4: #6c6c6c;
    --color-grey-5: #dddddd;
    --color-grey-6: #a2a2a2;
    --color-grey-7: #ececec;
    --color-grey-8: #eeeeee;
    --color-grey-9: #6c777d;
    --color-grey-10: #e3e3e3;
    --color-grey-11: #949494;
    --color-grey-12: #e9e9e9;
    --color-grey-13: #707070;
    --color-grey-14: #eaeced;
    --color-grey-15: #cccccc;
    --color-grey-16: #f2f2f2;
    --color-grey-17: #e9e9e9;
    --color-grey-18: #414141;
    --color-grey-19: #949494;
    --color-offwhite-1: #f7f7f7;
    --color-grey-100: var(--color-grey-1);
    --color-grey-200: var(--color-grey-2);
    --color-grey-300: var(--color-grey-3);
    --color-grey-400: #e1e1e1;
    --color-grey-500: #aaaaaa;
    --color-grey-600: #808080;
    --color-grey-700: var(--color-grey-dark);
    --color-grey-800: #6e6e6e;
    --color-blue: #0e6aaf;
    --color-blue-1: #77d8e8;
    --color-blue-2: #09a7e3;
    --color-blue-3: #b8e3eb;
    --color-blue-4: #4d90fe;
    --color-yellow-1: #f8d930;
    --color-yellow-2: #f4b822;
    --color-yellow-3: #ffe97d;
    --color-navy-1: #0b315e;
    --color-navy-2: #021f42;
    --color-navy-3: #0a4b8c;
    --color-orange-1: #f27930;
    --color-orange-2: #f4642a;
    --color-orange-3: #f99f5d;
    --color-red-1: #e10506;
    --color-teal-1: #77cabb;
    --color-teal-2: #00a78e;
    --color-teal-3: #78ead7;
    --color-green-1: #90cd45;
    --color-green-2: #61a515;
    --color-green-3: #aeeb63;
    --color-berry-1: #f4849a;
    --color-berry-2: #e46b95;
    --color-berry-3: #ffbdd1;
    --color-violet-1: var(--color-violet);
    --color-violet-2: #641987;
    --color-violet-3: var(--color-violet-tint);
    --color-link-blue: #0a79a2;
    --color-link-blue-deep: #064e69;
    --color-grey-dark: #262626;
    --color-grey-darker: var(--color-grey-18);
    --color-black: #000000;
    --color-white: #ffffff;
    --color-white-opacity: rgba(255, 255, 255, 0.3);
    --color-black-opacity: rgba(0, 0, 0, 0.2);
}

.required {
    color: var(--color-cranberry)
}
.field-label {
    font-weight: 700;
}

#logo {
    background-image: url("../img/aetna_purple_logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 30px;
    height: 2rem;
    min-width: 210px;
    width: 20%;
}

div#qr-code-err:empty {
    display: none;
}

#event-container {
    display: flex;
}

#event-detail-container {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    border: 0;
}

#btn-event-material {
    font-size: 2rem;
    font-weight: 600;
    padding: 0 3rem;
}

#p-for-btn, .text-align-ctr {
    text-align: center;
}

#event-material-form.form-control {
    border: 0;
}

#material-container{
    padding: 0
}

.text-info {
    color: var(--color-brightviolet) !important;
    background-color: var(--color-yellow-3);
}

img.card-img-top {
    background-color: var(--color-grey-800);
    height: auto;
    max-width: 100%;
}


.form-select:disabled {
    background-color: var(--color-grey-10);
}

nav.border-bottom {
    border-bottom: 1px solid var(--color-violet) !important;
}

.btn-primary {
    background-color: var(--color-violet);
    border-color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-light-violet);
    border-color: var(--color-white);
}

.alert-success {
    background-color: var(--color-green-1);
    color: var(--color-white);
}
.alert-danger {
    background-color: var(--color-berry-1);
    color: var(--color-white);
}