﻿/* =============== Fonts =============== */
@import url('https://fonts.googleapis.com/css?family=Barlow:400,400i,500,500i,600,600i,700,700i&display=swap');
/* =============== Variables =============== */
:root {
    /* Fonts */
    --font-family-primary: 'Barlow', sans-serif;
    /* Base */
    --theme-primary-color: #5877FF;
    --theme-secodary-color: #1D2858;
    --body-bg-color: #F2F3F7;
    --primary-text-color: #1D2858;
    --anchor-color: #5877FF;
    --anchor-hover-color: #5877FF;
    /* Sidebar */
    --main-navigation-bg: #fff;
    --main-navigation-text: #1D2858;
    --main-navigation-activeText: #5877FF;
    --main-navigation-height-small: 50px;
    --main-sidebar-width: 55px;
    --main-navlink-height: 48px;
    --lrs-sidebar-width: 350px;
    --lrsSidebar-TopNav-height-small: 50px;
    --lrsSidebar-TopNav-height-large: 70px;
    /* Button */
    --btn-primary-bg: #5877FF;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-color: #5877FF;
    --btn-secondary-bg: #1D2858;
    --btn-secondary-text: #ffffff;
    --btn-secondary-hover-color: #1D2858;
    /* Loader */
    --loader-border-width: 5px;
    --loader-color: #5877FF;
    --loader-bg-color: #fff;
    --loader-overlay-bg: #f2f3f7;
    /* Login page */
    --login-bg-color: #f2f3f7;
    /* Content wrapper */
    --contentWrapper-bg: #F2F3F7;
    /* Login Page*/
    --mainlogin-header-color: hsl(229, 50%, 80%);
    /* Progress Bar */
    --progress-bar-bg: #D5DCF2;
    --progress-bar-progress: #1D2858;
    --progress-bar-text: #FFF;
    /* size */
    --icon-xxs: 12px;
    --icon-xs: 16px;
    --icon-sm: 24px;
    --icon-md: 32px;
    --icon-lg: 48px;
    --icon-xl: 64px;
    --icon-xxl: 128px;
    --icon-custom: 30px;
}


/* =============== Primary Style =============== */

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 10px;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: 100%
}

body {
    font-family: 'Barlow', sans-serif;
    font-family: var(--font-family-primary);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
    color: #212C5B;
    color: var(--primary-text-color);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    display: inline-block;
    color: #5877FF;
    color: var(--anchor-color);
    text-decoration: none;
}

a:focus,
a:hover {
    display: inline-block;
    color: #5877FF;
    color: var(--anchor-color);
    text-decoration: none;
}

button {
    font-size: 1.6rem;
    border: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

input,
textarea {
    font-family: 'Barlow', sans-serif;
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-size: 1.6rem;
}

input::-ms-clear,
textarea::-ms-clear {
    display: none;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
}
  
select::-ms-expand {
    display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    font-family: 'Barlow', sans-serif;
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-size: 1.6rem;
    border: none;
    -webkit-text-fill-color: #212C5B;
    -webkit-text-fill-color: var(--primary-text-color);
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* =============== Global Style =============== */
.no-scroll {
    overflow: hidden;
}

.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* =============== Icon Style =============== */
.icon-block {
    display: inline-block;
    height: 1em;
    width: 1em;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

/* icon size */
.icon-xxs {
    display: inline-block;
    font-size: 12px;
    font-size: var(--icon-xxs) !important;
}

.icon-xs {
    display: inline-block;
    font-size: 16px;
    font-size: var(--icon-xs) !important;
}

.icon-sm {
    display: inline-block;
    font-size: 24px;
    font-size: var(--icon-sm) !important;
}

.icon-md {
    display: inline-block;
    font-size: 32px;
    font-size: var(--icon-md) !important;
}

.icon-lg {
    display: inline-block;
    font-size: 48px;
    font-size: var(--icon-lg) !important;
}

.icon-xl {
    display: inline-block;
    font-size: 64px;
    font-size: var(--icon-xl) !important;
}

.icon-xxl {
    display: inline-block;
    font-size: 128px;
    font-size: var(--icon-xxl) !important;
}

.icon-custom {
    display: inline-block;
    font-size: 30px;
    font-size: var(--icon-custom) !important;
}

.icon-before-text {
    position: relative;
    display: inline-block;
    font-size: inherit;
    padding-left: 1.5em;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1em;
}

.icon-before-text::before {
    content: '';
    display: inline-block;
    font-size: inherit;
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

.icon-after-text {
    position: relative;
    display: inline-block;
    font-size: inherit;
    padding-right: 1.5em;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1em;
}

.icon-before-text::before {
    content: '';
    display: inline-block;
    font-size: inherit;
    width: 1em;
    height: 1em;
    position: absolute;
    left: auto;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
