@import "anim.css";
@import "font-awesome.css";
@import "forms.css";

@font-face {
    font-family: ProductSansRegular;
    src: url('/static/fonts/ProductSansRegula.woff') format('woff');
}

* {
    font-family: ProductSansRegular, serif;
}

html, body {
    margin: 0;
    padding: 0;
}

:root {
    --primary-light-color: #4dafc1;
    --primary-color: #388492;
    --primary-dark-color: #1C4249;
    --accent-color: #FFD435;
    --background-color: #FFF5E5;
    --text-color: #6b8084;
    --text_grey_light_color: #ADADAD;
    --text_grey_dark_color: #5C5C5C;
    --text_grey_dark_new_color: #444444;
    --text_pink_dark_color: #F18495;
    --footer_text_color: #AFE1EA;
    --font-10px: 10px;
    --font-11px: 11px;
    --font-12px: 12px;
    --font-13px: 13px;
    --font-14px: 14px;
    --font-15px: 15px;
    --font-16px: 16px;
    --font-17px: 17px;
    --font-18px: 18px;
    --font-20px: 20px;
    --font-21px: 21px;
    --font-22px: 22px;
    --font-23px: 23px;
    --font-24px: 24px;
    --font-26px: 26px;
    --font-28px: 28px;
    --font-30px: 30px;
    --font-32px: 32px;
    --font-34px: 34px;
    --font-36px: 36px;
    --font-38px: 38px;
    --font-40px: 40px;
}

/*-------- No margin -------*/
.no-margin {
    margin: 0;
}

.no-left-margin {
    margin-left: 0;
}

.no-right-margin {
    margin-right: 0;
}

.no-top-margin {
    margin-top: 0;
}

.no-bottom-margin {
    margin-bottom: 0;
}

/*-------- No padding -------*/
.no-left-padding {
    padding-left: 0;
}

.no-right-padding {
    padding-right: 0;
}

.no-top-padding {
    padding-top: 0;
}

.no-bottom-padding {
    padding-top: 0;
}

/*-------- Height -------*/
.height-inherit {
    height: inherit;
}

.height-100 {
    height: 100%;
}

/*-------- width -------*/
.width-inherit {
    width: inherit;
}

.width-100 {
    width: 100%;
}

/*-------- Overflow -------*/
.overflow-all-auto {
    overflow: auto;
}

.overflow-all-hidden {
    overflow: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

/*-------- Fonts -------*/
.font-12px {
    font-size: var(--font-12px);
}

.font-13px {
    font-size: var(--font-13px);
}

.font-14px {
    font-size: var(--font-14px);
}

.font-15px {
    font-size: var(--font-15px);
}

.font-16px {
    font-size: var(--font-16px);
}

.font-17px {
    font-size: var(--font-17px);
}

.font-18px {
    font-size: var(--font-18px);
}

.font-20px {
    font-size: var(--font-20px);
}

.font-22px {
    font-size: var(--font-22px);
}

.font-22px {
    font-size: var(--font-22px);
}

.font-24px {
    font-size: var(--font-24px);
}

.font-32px {
    font-size: var(--font-32px);
}

.font-34px {
    font-size: var(--font-34px);
}

.font-36px {
    font-size: var(--font-36px);
}

.font-weight-100 {
    font-weight: 100;
}

.font-weight-200 {
    font-weight: 200;
}

.font-weight-300 {
    font-weight: 300;
}

.font-weight-400 {
    font-weight: 400;
}

.font-weight-500 {
    font-weight: 500;
}

.font-weight-600 {
    font-weight: 600;
}

.font-weight-700 {
    font-weight: 700;
}

.font-weight-800 {
    font-weight: 800;
}

.font-weight-900 {
    font-weight: 900;
}

.bold-text {
    font-weight: bold;
}

/************************** COLOR CLASSES *************/
.text-primary-color {
    color: var(--primary-color) !important;
}

.text-primary-dark-color {
    color: var(--primary-dark-color) !important;
}

.text-accent-color {
    color: var(--accent-color) !important;
}

.back-primary-color {
    background-color: var(--primary-color) !important;
}

.back-accent-color {
    background-color: var(--accent-color) !important;
}

.text-grey-light-color {
    color: var(--text_grey_light_color);
}

.text-grey-dark-color {
    color: var(--text_grey_dark_color);
}

.text-color {
    color: var(--text-color);
}

.text-pink-dark-color {
    color: var(--text_pink_dark_color);
}

.text-footer-color {
    color: var(--footer_text_color);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.text-footer-accent-color {
    color: #FFF1B9;
}

.text-defination {
    color: var(--text-color);
}

.box-shadow {
    box-shadow: 0 6px 20px rgba(3, 27, 78, 0.1) !important;
    -moz-box-shadow: 0 6px 20px rgba(3, 27, 78, 0.1) !important;
    -webkit-box-shadow: 0 6px 20px rgba(3, 27, 78, 0.1) !important;
}

.toast {
    min-height: 35px;
    line-height: 1.3em;
    background-color: var(--primary-color);
    padding: 9px 20px;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
}

/*For all side nav*/
.drag-target {
    width: 0;
}

.sidenav {
    box-shadow: none;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f3f3f3;
    box-shadow: inset 0 0 5px #eaeaea;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #d6d8d7;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #c0c0c0;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    -ms-transition: background 0.2s;
    -o-transition: background 0.2s;
    transition: background 0.2s;
}

/************* Loader ******************/
#loader {
    opacity: 0;
    height: 0;
    pointer-events: none;
    -webkit-transition: display 0.5s;
    -moz-transition: display 0.5s;
    -ms-transition: display 0.5s;
    -o-transition: display 0.5s;
    transition: display 0.5s;
}

body.loader-open #loader {
    opacity: 1;
    pointer-events: auto;
    /*display: block;*/
    position: fixed;
    left: 0;
    right: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #ffffff94;
    z-index: 99999;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

/************** Loader *************/
body.loader-open {
    overflow: hidden;
}

.loader {
    /*position: absolute;*/
    /*left: 0;*/
    /*right: 0;*/
    /*top: 0;*/
    /*bottom: 0;*/
    margin: 0;
    color: var(--primary-color);
    font-size: 70px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load-kf {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/********************* Tooltip ********************/
[data-tooltip],
.tooltip {
    position: relative;
    cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition: opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition: opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
    z-index: 1000;
    padding: 8px;
    width: 100px;
    background-color: #000;
    background-color: rgba(113, 113, 113, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.2;
    word-break: break-word;
    white-space: normal;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
    bottom: 100%;
    left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
    margin-left: -6px;
    margin-bottom: -12px;
    border-top-color: #000;
    border-top-color: rgba(113, 113, 113, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
    margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
    -webkit-transform: translateY(-12px);
    -moz-transform: translateY(-12px);
    transform: translateY(-12px);
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
    right: 100%;
    bottom: 50%;
    left: auto;
    /* New */
    margin-left: -149px;
}

.tooltip-left:before {
    margin-top: 6px;
    /*margin-left: 0;*/
    margin-right: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-left-color: #000;
    border-left-color: rgba(113, 113, 113, 0.9);
}

.tooltip-left:after {
    border-radius: 3px;
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
    -webkit-transform: translateX(-12px);
    -moz-transform: translateX(-12px);
    transform: translateX(-12px);
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
    top: 100%;
    bottom: auto;
    left: 50%;
}

.tooltip-bottom:before {
    margin-top: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #000;
    border-bottom-color: rgba(113, 113, 113, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
    -webkit-transform: translateY(12px);
    -moz-transform: translateY(12px);
    transform: translateY(12px);
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
    bottom: 50%;
    left: 100%;
}

.tooltip-right:before {
    margin-bottom: 0;
    margin-left: -12px;
    border-top-color: transparent;
    border-right-color: #000;
    border-right-color: rgba(113, 113, 113, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
    -webkit-transform: translateX(12px);
    -moz-transform: translateX(12px);
    transform: translateX(12px);
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
    top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
    /*margin-left: 0;*/
    /*margin-bottom: -16px;*/
    position: fixed;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
}

/**
 * ==============================================
 * Dot Flashing Loader (DIV Loader)
 * ==============================================
 */

.divLoader {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.82);
    z-index: 999999;
    pointer-events: auto;
}

.dot-flashing {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #388492;
    color: #388492;
    animation: dotFlashing 1s infinite linear alternate;
    animation-delay: .5s;
}

.dot-flashing::before, .dot-flashing::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-flashing::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #388492;
    color: #388492;
    animation: dotFlashing 1s infinite alternate;
    animation-delay: 0s;
}

.dot-flashing::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #388492;
    color: #388492;
    animation: dotFlashing 1s infinite alternate;
    animation-delay: 1s;
}

@keyframes dotFlashing {
    0% {
        background-color: #388492;
    }
    50%,
    100% {
        background-color: #c7e1e6;
    }
}

.card-heading {
    background-color: var(--primary-color) !important;
    color: #fff;
    padding: 15px;
    margin-bottom: -6px;
    font-size: 18px;
    display: block;
    text-align: center;
    width: 100%;
}

.btn-full {
    width: 100% !important;
}

.btn-full_with_margin {
    width: 100% !important;
    margin-top: 20px !important;
    height: 2.7rem;
}

hr.style2 {
    border-top: 1px dashed var(--primary-light-color);
    width: 60%;
}