@font-face {
  font-family: 'WCr FrankRuehl';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/WCrFrank.ttf) format('truetype');
}
@font-face {
  font-family: 'WCr Sarah';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/WCrSarah.ttf) format('truetype');
}
@font-face {
  font-family: 'SBL Hebrew';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/SBL_Hbrw.ttf) format('truetype');
}
@font-face {
  font-family: 'Ezra SIL';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/SILEOT.ttf) format('truetype');
}

:root {
    --primary-blue: #365c8b;
	--secondary-blue: #435872;
	--tertiary-blue: #7796bd;
    --primary-white: rgb(232, 232, 232);
    --secondary-white: rgb(255,255,255);
	--tertiary-white: rgb(192, 192, 192);
    --primary-black: rgb(26, 26, 26);
    --secondary-black: #1f1f1f;
    --tertiary-black: #2f2f2f;
    --primary-gray: #dfdfdf;
    --secondary-gray: #bfbfbf;
    --tertiary-gray: #8f8f8f;
}

.hide {
    display: none !important;
}

.show {
    /* display: block; */
}

body {
    padding: 0 !important;
}

.links-auth {
    display: flex;
}
.links-auth a, .links-auth button, .links-noauth a, .links-noauth button {
    margin-left: 0.5rem;
}

.links-auth a, .links-noauth a {
    display: inline-block !important;
}

.ui-button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid var(--primary-white) !important;
    border-radius: 0.25rem;
    background-color: var(--secondary-blue) !important;
    color: var(--primary-white) !important;
    width: 2.75rem;
    height: 2.25rem;
    touch-action: manipulation;
}
.ui-button:hover {
    background-color: var(--primary-white) !important;
    color: var(--primary-blue) !important;
    border-color: var(--secondary-blue) !important;
}
.ui-button:active {
    border: 1px solid var(--primary-white) !important;
    background-color: var(--primary-blue) !important;
    color: var(--primary-white) !important;
}
.ui-button:disabled {
    background-color: var(--primary-gray);
    color: var(--tertiary-gray);
    border-color: var(--tertiary-gray);
}
.ui-button-wide {
    width: 7rem;
}

nav.navbar {
    background-color: var(--primary-blue);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10001;
}

#product-link-dropdown-button {
    display: flex !important;
    padding: 0 !important;
}

.product-link-dropdown-menu {
    display: none;
    position: absolute;
    top: 3.5rem;
    left: 21.65rem;
    background-color: white;
}
.product-link-dropdown-menu.show {
    display: flex;
    flex-direction: column;
}
.product-link-dropdown-menu a {
    padding: 0 0.5rem 0 0.5rem;
    width: 100%;
}

.navbar-left {
    display: flex !important;
    flex-direction: row;
    align-items: center;
}

a.navbar-brand {
    align-items: center;
    padding: 0;
}
a.product-link {
    color: black;
    font-size: 1.1rem;
    padding-left: 1rem;
    text-decoration: none;
    transition: 0.3s all;
}
a.product-link:hover {
    color: var(--primary-blue);
}

a.navbar-brand {
    color: var(--primary-white);
    transition: 0.3s all;
}

a.navbar-brand:hover {
    color: var(--secondary-white);
}

.navbar svg {
    margin-bottom: 0.25rem;
}

.links-auth a {
    background-color: var(--secondary-blue);
}

.toast-container {
    z-index: 10005;
    top: 3rem;
    position: fixed !important;
}

h1 {
    text-align: center;
    font-weight: 800;
    font-size: 3rem;
    font-family: 'Times New Roman';
}
h1.subtitle {
    font-size: 2rem;
    
}

div.flex-col {
    flex-direction: column;
}

.svg-icon {
    fill: currentColor;
    height: 16px;
    width: 16px;
}

table {
    font-size: 1.25rem;
}

table * {
    color: black;
}

table.dict-info {
    margin: 0 !important;
}

.perspective {
    perspective: 1500px;
    padding: 25px;
}
.perspective img {
    transform: rotateX(10deg) rotateY(-18deg) rotateZ(3deg);
    border-radius: 2rem;
    box-shadow: 2px 10px 30px hsla(0, 0%, 0%, 0.25);
    transition: .3s;
}

div#single-form {
    min-height: calc(100vh - 80px);
}

.dropdown-item {
    user-select: none;
    font-size: 1.25rem;
}

.wcrfrank-font {
	font-family: 'WCr FrankRuehl', serif;
}
.wcrsarah-font {
	font-family: 'WCr Sarah', sans-serif;
}
.sblhebrew-font {
	font-family: 'SBL Hebrew', serif;
}
.ezrasil-font {
	font-family: 'Ezra SIL', sans-serif;
}

.topper {
    position: absolute;
    width: 100%;
    z-index: -10;
}

.accordion {
	--bs-accordion-btn-padding-y: 0.5rem;
}
.accordion-header {
	line-height: 0.8rem;
	margin-bottom: 0;
	margin-top: 0;
}

.info-tip {
    margin-top: 0%;
    margin-bottom: 12px;
}

.container {
    margin: 3rem 2rem 2rem 2rem;
    max-width: 100%;
    width: auto;
}

img.flash {
    padding-bottom: 12px;
}

.card {
    background-color: white;
}

ul.freq-dict-icons li {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
ul.freq-dict-icons li:first-child {
    margin-top: 0.5rem;
}
ul.freq-dict-icons li .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-blue);
    color: white !important;
    fill: white !important;
    width: 2.75rem !important;
    height: 2.25rem !important;
    margin: 0 !important;
    border: none;
    border-radius: 0.25rem;
    pointer-events: none;
}
ul.freq-dict-icons li .icon:hover {
    background-color: var(--secondary-blue) !important;
    color: white !important;
    fill: white !important;
    cursor: default !important;
    border: none;
}

/* SECTION: 1199 smaller devices */
@media (max-width: 1199px) {
    .container {
        /* FIXME: this doesn't seem to be doing anything important, and it's messing other stuff up, so I'm commenting it out for now... */
        /* margin: 3rem 1rem 1rem 1rem !important; */ 
    }
}
/* !SECTION */


/* SECTION: 767 specifically mobile devices (as opposed to just smaller devices) */
@media (max-width: 767px) {
    .container {
        margin: 0;
        padding: 0;
    }

    .product-link-dropdown-menu {
        left: 4.75rem;
    }
}
/* !SECTION */

/* SECTION: 440 navbar collapse point */
@media (max-width: 440px) {
    .links-auth a, .links-noauth a {
        width: 2.75rem;
    }
    .links-auth a span, .links-noauth a span {
        display: none;
    }
}
/* !SECTION */

/* SECTION: 398 smallest devices (phones, etc.) */
@media (max-width: 398px) {
    
}
/* !SECTION */

/* SECTION: dark mode */
@media (prefers-color-scheme: dark) {
    a.product-link {
        color: var(--primary-white);
    }
    a.product-link:hover {
        color: var(--tertiary-blue);
    }

    body {
        background-color: var(--primary-black) !important;
        color: white;
    }

    table * {
        color: white;
    }

    .card {
        background-color: var(--primary-black);
        color: white;
    }

    #liveToast {
        background-color: var(--primary-black);
        color: white;
    }

    .card {
        background-color: var(--primary-black);
    }

    div.dropdown-menu {
        background-color: var(--primary-black);
        color: white;
        border: 1px solid rgba(256,256,256,0.7);
    }
}
/* !SECTION */

/* SECTION: edge case to remove hover styling on smaller devices */
@media (hover: none) {
    .ui-button:hover {
        color: var(--primary-white) !important;
        background-color: var(--secondary-blue) !important;
        border-color: var(--primary-white) !important;
    }

    .ui-button:active {
        border: 1px solid var(--primary-white) !important;
        background-color: var(--primary-white) !important;
        color: var(--secondary-blue) !important;
    }
}
/* !SECTION */