/* Define Global Variables here */

:root {
    --primaryLight: #008BFF;
    --primary: #006FCB;
    --primaryDark: #054B94;
    --gradient: linear-gradient(225deg, var(--primaryDark) 0%, var(--primaryLight) 100%);
    --gradientDarkToLight: linear-gradient(225deg, var(--primary) 0%, var(--night) 100%);
    --secondaryLight: #FF4B48;
    --secondary: #EA1C18;
    --secondaryDark: #D21915;
    --dayLight: #E5F3FF;
    --day: #CCE7FF;
    --dayDark: #99CFFF;
    --nightLight: #043E7C;
    --night: #033263;
    --nightDark: #011E32;
    --grey20: #333333;
    --grey29: #4A4B4B;
    --grey45: #757575;
    --grey55: #8D8D8D;
    --grey70: #B3B3B3;
    --grey80: #CCCCCC;
    --grey90: #E6E6E6;
    --grey94: #F0F0F0;
    --grey96: #F6F6F6;
    --white: #FFF;
    --successBg: #E8F5E9;
    --successText: #1B5E20;
    --successIcon: #4CAF50;
    --warningBg: #FFFDE7;
    --warningText: #714A0F;
    --warningIcon: #F3B720;
    --errorBg: #FFEBEE;
    --errorText: #AD1103;
    --errorIcon: #F32039;
    --infoBg: var(--dayLight);
    --infoText: var(--night);
    --infoIcon: var(--primary);
    --svgIcon: #F89E00;
    --lightBg: #FFEBEE;
}


body {
    font-family: 'Roboto', sans-serif;
    color: var(--grey20);
    font-weight: 400;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    font-size: 16px;
    color: var(--primary);
}

a:hover {
    color: var(--primaryDark);
    text-decoration: none;
    cursor: pointer;
}

a.disabled {
    pointer-events: none;
    opacity: 0.7;
}


/** button with anchor & span **/
a.button,
span.button {
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    cursor: pointer;
}

a:focus,
.btn.focus,
.btn:focus,
button:focus {
    outline: 0;
    box-shadow: none;
}


/** default button **/
.btn, .button {
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
}

.button {
    font-size: 16px;
    border-radius: 5px;
    border: 0;
}

button a:hover {
    text-decoration: none;
}

/** theme button **/
.theme-btn {
    background-color: var(--secondary);
    color: var(--white);
}

.theme-btn:hover {
    background-color: var(--secondaryDark);
    color: var(--white);
}


/** primary button **/

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

.primary-btn:hover {
    background-color: var(--primaryDark);
    color: var(--white);
}


/** outline button **/

.outline-btn {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}

.outline-btn:hover {
    color: var(--primaryDark);
    border: 1px solid var(--primaryDark);
}

/** white button **/

.white-btn {
    background: var(--white);
    color: var(--primary);
    border: 1px solid var(--white);
}

.white-btn:hover {
    color: var(--primaryDark);
    border: 1px solid var(--white);
}

/** flat button **/

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

.flat-btn:hover {
    background-color: var(--white);
    color: var(--primaryDark);
}


/** flat button **/

.danger-flat-btn {
    background-color: inherit;
    color: var(--errorText);
}

.danger-flat-btn:hover {
    background-color: inherit;
    color: var(--errorText);
}

/** disabled **/

.disabled-btn {
    background-color: var(--grey80);
    color: var(--white);
}

p {
    font-size: 16px;
    line-height: 20px;
    word-break: break-word;
}

.text-clip {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.secondary-font {
    font-family: 'Montserrat', sans-serif;
}

.scroller {
    overflow-y: auto;
    scrollbar-color: var(--primary) transparent;
    scrollbar-width: thin;
}

.scroller::-webkit-scrollbar {
    width: 2px;
}

.scroller::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--dayLight);
    border-radius: 2px;
}

.scroller::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 2px;
}