/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Theme Colors */
:root {
  --primary-color: #0073cf;
  --light-primary-color: #E2F3F0;
  --secondary-color: #EC6C5A;
  --light-secondary-color: #FFE9E5;
  --tertiary-color: #FFEED3;
  --dark-color: #31333A;
  --light-color: #FFFFFF;
  --grey-color: #BBC7D4;
  --light-dark-color: #727272;
  --light-grey-color: #f5f5f5;
  --warning-color:#ffca2c;
}

/* Fonts */
:root {
  --body-font: 'Manrope', sans-serif;
  --heading-font: 'Manrope', sans-serif;
}

body {

  --bs-link-color: var(--dark-color);
  --bs-link-hover-color: var(--dark-color);

  /*--bs-link-color-rgb: 40, 40, 40;*/
  --bs-link-hover-color-rgb: 0, 0, 0;

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: var(--body-font);
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 14px;
  --bs-body-font-weight: 600;
  --bs-body-line-height: 1.3rem;
  --bs-body-color: var(--dark-color);

  --bs-primary: #2c72b8;
  --bs-primary-rgb: 76, 192, 130;
  --bs-primary-bg-subtle: #E2F3F0;

  --bs-border-color: #F7F7F7;

  --bs-secondary: #EC6C5A;
  --bs-secondary-rgb: 236, 108, 90;
  --bs-secondary-bg-subtle: #FFE9E5;

  --bs-tertiary: #f8be60;
  --bs-tertiary-bg-subtle: #FFEED3;

}
.match-height > [class*='col'] {
    display: flex;
}

.btn {
  --bs-btn-font-family: var(--heading-font);
  font-size:14px;
  font-weight: 600;
}

.btn-primary {
  transition: all 0.3s ease-in;
  --bs-btn-color: var(--light-color);
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #46ad76;
  --bs-btn-hover-border-color: #46ad76;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--light-color);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--light-color);
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: var(--primary-color);
}
.btn-primary:hover {
	background:#075898;
}
.btn-outline-primary {
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease-in;
  --bs-btn-color: var(--primary-color);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--primary-color);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary-color);
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: var(--primary-color);
  --bs-gradient: none;
}

.btn-outline-dark {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease-in;
}

.btn-dark {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease-in;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--dark-color);
  --bs-btn-border-color: var(--dark-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--dark-color);
  --bs-btn-active-border-color: var(--dark-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--dark-color);
  --bs-btn-disabled-border-color: var(--dark-color);
}

/* body {
  letter-spacing: 0.01625rem;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  color: var(--bs-primary);
  font-weight: 700;
  text-transform: capitalize;
}

a {
  text-decoration: none;
}

.breadcrumb {
  --bs-breadcrumb-item-active-color: var(--dark-color);
}

.form-control {
  border: 1px solid #e4e3e3;
}

.form-control:focus {
  border-color: #949494;
  outline: 0;
  box-shadow: none;
}

.padding-large {
  padding-top: 18rem;
  padding-bottom: 14rem;
}

.padding-medium {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.padding-medium-2 {
  padding-top: 11rem;
  padding-bottom: 8rem;
}

@media only screen and (max-width: 768px) {
  .padding-large {
    padding-top: 10rem;
    padding-bottom: 5rem;
  }

  .padding-medium {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .padding-medium-2 {
    padding-top: 12rem;
    padding-bottom: 6rem;
  }
}


/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  background: rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-wrapper .preloader {
  /* margin: 20% auto 0; */
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -1.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 1.5em;
}

@keyframes animation {

  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em #0073cf;
  }

  40% {
    box-shadow: 0 2em 0 0 #0073cf;
  }
}


@media screen and (max-width: 991px) {

  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }

  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }

}



/*----- Nav Section Style -------------------------*/
/* nav bar style  */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:hover {
  color: var(--primary-color);
}

.nav-link {
  color: var(--dark-color);
  font-size: 1rem;
  font-weight: 700;
  color:#ffffff;
}

/* dropdown style */
.dropdown-item {
  font-weight: 700;
  padding: 0.5rem 1rem;
  font-size:14px;
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--body-text-color);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--light-grey-color);
}


/*----- catergory Section Style -------------------------*/
.category-paragraph {
  transition: all 0.3s ease-in;
}

.primary {
  background: var(--bs-primary);
  transition: all 0.3s ease-in;
}

.svg-primary {
  color: var(--primary-color);
  transition: all 0.3s ease-in;
}

.primary:hover {
  background: var(--bs-primary);
}

.secondary {
  background: var(--bs-secondary);
  transition: all 0.3s ease-in;
}

.svg-secondary {
  color: var(--secondary-color);
  transition: all 0.3s ease-in;
}

.secondary:hover {
  background: var(--bs-secondary);
}

.tertiary {
  background: var(--bs-tertiary-bg-subtle);
  transition: all 0.3s ease-in;
}

.svg-tertiary {
  color: var(--bs-tertiary);
  transition: all 0.3s ease-in;
}

.tertiary:hover {
  background: var(--bs-tertiary);
}

.gray {
  background: #e0e5eb;
  transition: all 0.3s ease-in;
}

.svg-gray {
  color: var(--bs-gray);
  transition: all 0.3s ease-in;
}

.gray:hover {
  background: var(--bs-gray);
}

.success {
	background:#66BB6A;
}

.primary:hover .svg-primary,
.primary:hover .category-paragraph,
.secondary:hover .svg-secondary,
.secondary:hover .category-paragraph,
.tertiary:hover .svg-tertiary,
.tertiary:hover .category-paragraph,
.gray:hover .svg-gray,
.gray:hover .category-paragraph {
  color: var(--light-color);
}


/*----- footer Section Style -------------------------*/
a.footer-link:hover {
  color: var(--primary-color);
}
.filters-area {
	background: #d6d2d2;
    padding: 20px;
    border-radius: 8px;
}
.form-group {
	margin-bottom:6px;
}
.form-group label {
	margin-bottom:4px;
}
.form-select, .form-control {
	font-size:14px;
	font-weight:500;
	box-shadow:var(--bs-box-shadow);
}
th {
	background-color:#e0dfdf !important;
}
.rgbBg {
	background-color:#B3E5FC !important;
}
.classrgbBg {
	background-color:#C5E1A5 !important;
}
.dlBg {
	background-color:#fcb9b3 !important;
}
small {
    font-size: 0.75rem;
    line-height: 1;
	color:inherit;
}

.highest {
	border: 1px solid #000;
    border-radius: 20px;
    padding: 4px 10px;
    background: #e7e7e7;
}
.ml-output {
	background:#ffffff;
	padding:20px;
	border-radius:8px;
	box-shadow:0px 4px 12px rgba(0,0,0,0.15);
}

#footer-bottom {
	background:#181818;
}
/* Login CSS */
.login-wrapper {
	width:100%;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:end;
	background:url('../images/login-bg.jpg') no-repeat;
  background-size:100% 100%;
	/* background-size:cover; */
}
.login-container {
	background:#ffffff;
	box-shadow:0px 4px 12px rgba(0,0,0,0.15);
	border-radius:20px;
	width:320px;
	margin-right:100px;
}
.login-logo {
	text-align:center;
	background:#0073cf;
	padding:20px;
	/* border-radius:20px 20px 0 0; */
}
.login-logo img {
	width:230px;
}
.login-form {
	background:#ffffff;
	padding:20px;
	/* border-radius: 0 0 20px 20px; */
}
@media (max-width:600px){
	.login-wrapper {
		justify-content:center;
	}
	.login-container {
		margin-right:0;
	}
	.modal-fullscreen {
		width:100vw !important;
	}
}
.feature-item {
    box-shadow: 4px 4px 10px rgba(150, 150, 150, 0.192);
    background: var(--light-color);
    cursor: pointer;
}
.feature-title {
    font-weight: 900;
    text-transform: uppercase;
    color: var(--secondary-color);
    transition: all 0.3s ease-in;
}
.feature-detail {
	margin-bottom:20px;
}
.feature-info{
    transition: all 0.3s ease-in;
}
.explore-btn .btn i{
	margin-left:5px;
}
.modal-fullscreen {
	width:75vw;
	margin:0 auto;
}
.modal-header {
	border-bottom:1px solid #dddddd;
}
.direct-chat-msg {
	display:block;
    margin-bottom: 16px;
}
.direct-chat-img {
    float: left;
    height: 40px;
    width: 40px;
}
.direct-chat-text {
	display:block;
    border-radius: .3rem;
    background-color: #e8e8e8;
    border: 1px solid #e8e8e8;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 15px;
    position: relative;
}
.direct-chat-msg::after {
    display: block;
    clear: both;
    content: "";
}
.direct-chat-text::after, .direct-chat-text::before {
    border: solid transparent;
    border-right-color: #e8e8e8;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::before {
    border-width: 6px;
    margin-top: -6px;
}
.right .direct-chat-img {
    float: right;
}
.right .direct-chat-text {
    margin-left: 0;
    margin-right: 50px;
	background-color: #ffffff;
    /* border-color: #007bff; */
}

.right>.direct-chat-text::after, .right>.direct-chat-text::before {
	border-left-color: #e8e8e8;
	border-right-color: transparent;
    left: 100%;
    right: auto;
}
.pill-item {
	background:#f5f5f5;
	border:1px solid #0073cf;
	border-radius:30px;
	margin-right:10px;
	margin-bottom:10px;
	padding:5px 16px;
}
.pill-item:hover, .pill-item.selected {
	background:#0073cf;
}
.pill-item:hover a, .pill-item.selected a {
	color:#FFFFFF;
}
.log-success {
	height: calc(100vh - 107px);
    display: flex;
    align-items: center;
	justify-content:center;
    flex-direction: column;
}
.package-logo {
	margin-right:10px;
}
.package-logo img {
	height:40px;
}
.software-box {
	cursor:pointer;
	transition:all 0.3s;
}
.software-box:hover {
	background:#f0f0f0 !important;
}
.software-box.selected {
	background:#f0f0f0 !important;
	border:1px solid #0073cf;
}
.process-update {
	height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.level {
	background:#ffc107;
	padding:7px 10px;
	border-radius:30px;
	font-size:1rem;
	font-weight:800;
	color:#333333;
}

/* Sidebar */
.sidebar {
	background:#f9f9f9;
	position: fixed;
    top: 0;
    right: 0;
    padding: 0.5rem 1rem;
    height: 100vh;
    overflow-y: auto;
    width: 80%;
    max-width: 600px;	
	transform:translateX(600px);
	transition:0.5s transform ease-in-out;
}
.sidebar-heading {
	margin-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar.opened {
	transform:translateX(0);
}

/* Tabs */
.nav-tabs{
	border-bottom:1px solid #0073cf !important;
}
.nav-link {
	font-size:14px;
	color:#000000;
}
.nav-tabs .nav-link:hover {
	border-color:#0073cf !important;
}
.nav-link.active {
	background:#0073cf !important;
	color:#ffffff !important;
}

/* Inner tabs */
.inner-tabs .nav-link:hover {
	border:0 !important;
	border-bottom:5px solid var(--warning-color) !important;
}
.inner-tabs .nav-link.active{
	background-color:#ffffff !important;
	color:var(--warning-color) !important;
	border:0 !important;
	border-bottom:5px solid var(--warning-color) !important;
}

.btn-check:checked+.btn {
	color:#ffffff;
}

/* datatable */





.mat-mdc-form-field-infix {



  min-height: 40px !important;

  padding-top: 10px !important;

  padding-bottom: 0px !important;



}



.mat-mdc-table {

  background-color: whitesmoke;

}





/* toaster */



.toast-center-center {

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.toast-top-center {

  top: 0;

  right: 0;

  width: 100%;

}

.toast-bottom-center {

  bottom: 0;

  right: 0;

  width: 100%;

}

.toast-top-full-width {

  top: 0;

  right: 0;

  width: 100%;

}

.toast-bottom-full-width {

  bottom: 0;

  right: 0;

  width: 100%;

}

.toast-top-left {

  top: 12px;

  left: 12px;

}

.toast-top-right {

  top: 12px;

  right: 12px;

}

.toast-bottom-right {

  right: 12px;

  bottom: 12px;

}

.toast-bottom-left {

  bottom: 12px;

  left: 12px;

}



/* toast styles */

.toast-title {

  font-weight: bold;

}

.toast-message {

  word-wrap: break-word;

}

.toast-message a,

.toast-message label {

  color: #FFFFFF;

}

.toast-message a:hover {

  color: #CCCCCC;

  text-decoration: none;

}

.toast-close-button {

  position: relative;

  right: -0.3em;

  top: -0.3em;

  float: right;

  font-size: 20px;

  font-weight: bold;

  color: #FFFFFF;

  text-shadow: 0 1px 0 #ffffff;

  /* opacity: 0.8; */

}

.toast-close-button:hover,

.toast-close-button:focus {

  color: #000000;

  text-decoration: none;

  cursor: pointer;

  opacity: 0.4;

}

/*Additional properties for button version

 iOS requires the button element instead of an anchor tag.

 If you want the anchor version, it requires `href="#"`.*/

button.toast-close-button {

  padding: 0;

  cursor: pointer;

  background: transparent;

  border: 0;

}

.toast-container {

  pointer-events: none;

  position: fixed;

  z-index: 999999;

}

.toast-container * {

  box-sizing: border-box;

}

.toast-container .ngx-toastr {

  position: relative;

  overflow: hidden;

  margin: 0 0 6px;

  padding: 15px 15px 15px 50px;

  width: 300px;

  border-radius: 3px 3px 3px 3px;

  background-position: 15px center;

  background-repeat: no-repeat;

  background-size: 24px;

  box-shadow: 0 0 12px #999999;

  color: #FFFFFF;

}

.toast-container .ngx-toastr:hover {

  box-shadow: 0 0 12px #000000;

  opacity: 1;

  cursor: pointer;

}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/info-circle.svg */

.toast-info {

  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOS4wNDMgOCA4IDExOS4wODMgOCAyNTZjMCAxMzYuOTk3IDExMS4wNDMgMjQ4IDI0OCAyNDhzMjQ4LTExMS4wMDMgMjQ4LTI0OEM1MDQgMTE5LjA4MyAzOTIuOTU3IDggMjU2IDh6bTAgMTEwYzIzLjE5NiAwIDQyIDE4LjgwNCA0MiA0MnMtMTguODA0IDQyLTQyIDQyLTQyLTE4LjgwNC00Mi00MiAxOC44MDQtNDIgNDItNDJ6bTU2IDI1NGMwIDYuNjI3LTUuMzczIDEyLTEyIDEyaC04OGMtNi42MjcgMC0xMi01LjM3My0xMi0xMnYtMjRjMC02LjYyNyA1LjM3My0xMiAxMi0xMmgxMnYtNjRoLTEyYy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDY0YzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MTAwaDEyYzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MjR6Jy8+PC9zdmc+");

}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/times-circle.svg */

.toast-error {

  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTEyMS42IDMxMy4xYzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMzggMzc3LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMzEybC02NS4xIDY1LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwxMzQuNCAzMzhjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2NS42LTY1LTY1LjYtNjUuMWMtNC43LTQuNy00LjctMTIuMyAwLTE3bDM5LjYtMzkuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsNjUgNjUuNyA2NS4xLTY1LjZjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDM5LjYgMzkuNmM0LjcgNC43IDQuNyAxMi4zIDAgMTdMMzEyIDI1Nmw2NS42IDY1LjF6Jy8+PC9zdmc+");

}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/check.svg */

.toast-success {

  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeicvPjwvc3ZnPg==");

}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/exclamation-triangle.svg */

.toast-warning {

  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NzYgNTEyJyB3aWR0aD0nNTc2JyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eicvPjwvc3ZnPg==");

}

.toast-container.toast-top-center .ngx-toastr,

.toast-container.toast-bottom-center .ngx-toastr {

  width: 300px;

  margin-left: auto;

  margin-right: auto;

}

.toast-container.toast-top-full-width .ngx-toastr,

.toast-container.toast-bottom-full-width .ngx-toastr {

  width: 96%;

  margin-left: auto;

  margin-right: auto;

}

.ngx-toastr {

  background-color: #030303;

  pointer-events: auto;

}

.toast-success {

  background-color: #51A351;

}

.toast-error {

  background-color: #BD362F;

}

.toast-info {

  background-color: #2F96B4;

}

.toast-warning {

  background-color: #F89406;

}

.toast-progress {

  position: absolute;

  left: 0;

  bottom: 0;

  height: 4px;

  background-color: #000000;

  opacity: 0.4;

}

/* Responsive Design */

@media all and (max-width: 240px) {

  .toast-container .ngx-toastr.div {

    padding: 8px 8px 8px 50px;

    width: 11em;

  }

  .toast-container .toast-close-button {

    right: -0.2em;

    top: -0.2em;

  }

}

@media all and (min-width: 241px) and (max-width: 480px) {

  .toast-container .ngx-toastr.div {

    padding: 8px 8px 8px 50px;

    width: 18em;

  }

  .toast-container .toast-close-button {

    right: -0.2em;

    top: -0.2em;

  }

}

@media all and (min-width: 481px) and (max-width: 768px) {

  .toast-container .ngx-toastr.div {

    padding: 15px 15px 15px 50px;

    width: 25em;

  }

}