:root{
    --loader-width: 40px;
    --loader-height: 40px;
    --less-margin: -20px;
    --loader-color-primary: #27ae60;
    --loader-color-secondary: #eee;
    --line-width: 2px;
}[dir=ltr]:root{
    --animation-duration: 2s;
}[dir=rtl]:root{
    --animation-duration: 2s;
}.preloader {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 9999999;
	top: 0;
}[dir] .preloader {
    background: #fff;
}[dir=ltr] .preloader {
    left: 0;
}[dir=rtl] .preloader {
	right: 0;
}.preloader .loader {
    position: relative;
    width: var(--loader-width);
    height: var(--loader-height);
}[dir] .preloader .loader {
    border: var(--line-width) solid var(--theme-gray-color);
    border-radius: 50%;
    border-top: var(--line-width) solid var(--theme-primary-color);
    margin-top: var(--less-margin);
}[dir=ltr] .preloader .loader {
    -webkit-animation:  spin-ltr var(--animation-duration) linear infinite;
    animation:  spin-ltr var(--animation-duration) linear infinite;
    margin-left: var(--less-margin);
}[dir=rtl] .preloader .loader {
    -webkit-animation:  spin-rtl var(--animation-duration) linear infinite;
    animation:  spin-rtl var(--animation-duration) linear infinite;
    margin-right: var(--less-margin);
}.preloader-section {
    position: relative;
    width: 100%;
    height: 200px;
}[dir] .preloader-section {
    background: transparent;
}.preloader-section .loader {
    position: relative;
    width: var(--loader-width);
    height: var(--loader-height);
}[dir] .preloader-section .loader {
    border: var(--line-width) solid var(--theme-gray-color);
    border-radius: 50%;
    border-top: var(--line-width) solid var(--theme-primary-color);
    margin-top: var(--less-margin);
}[dir=ltr] .preloader-section .loader {
    -webkit-animation:  spin-ltr var(--animation-duration) linear infinite;
    animation:  spin-ltr var(--animation-duration) linear infinite;
    margin-left: var(--less-margin);
}[dir=rtl] .preloader-section .loader {
    -webkit-animation:  spin-rtl var(--animation-duration) linear infinite;
    animation:  spin-rtl var(--animation-duration) linear infinite;
    margin-right: var(--less-margin);
}/* Safari */@-webkit-keyframes spin-ltr {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}@-webkit-keyframes spin-rtl {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-360deg); }
}@keyframes spin-ltr {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}@keyframes spin-rtl {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}