@charset 'utf-8';
////
/// all kinds of styles based on a guide for generic use
/// @group Useful Getronics 'variables.scss'
////

/// Sizes of pixels passed to rem "Root Em" based on the root
/// @access public
/// @author Adrián Castillo
/// @param {size} $size - size in pixels of some property
/// @return {remSize} - size converted to rem for properties
/// @example
/// this function is a Rem calculator, depending on the pixels that arrive by parameter it evaluates the conversion
/// calculateRem (size) --> calculateRem (16px) --> size: 1 rem;
/// calculateRem (size) --> calculateRem (96px) --> size: 6 rem;
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

/// Mixin that by calling the pix conversion function in rem, we assign this measure for the property passed by parameter
/// @access public
/// @author Adrián Castillo
/// @param {attribute} $attribute - property, font-size | height
/// @param {size} $size - size in pixels of some property, 20px
/// @output 'property' and 'size in rem'
/// @example
/// this mixin assigns the first parameter property, the second parameter size in rem
/// sizePxToRemProperty (font-size, 24px) --> (font-size: 1,5 rem;)
/// sizePxToRemProperty (height, 64px)    --> (height: 4 rem;)
@mixin sizePxToRemProperty($attribute, $size) {
  #{$attribute}: calculateRem($size);
}

/// Blue Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#294199" x="30" y="0" width="100%" height="100%"/></svg>
/// @type color model
$blue-getronics: hsl(227°, 58%, 38%);
/// Red Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#D0011D" x="30" y="0" width="100%" height="100%"/></svg>
/// @type color model
$red-getronics: hsl(352°, 99%, 41%);
/// Orange Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#BD4500" x="30" y="0" width="100%" height="100%"/></svg>
/// @type color model
$orange-getronics: hsl(22°, 100%, 37%);
/// Black Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#1C2131" x="30" y="0" width="100%" height="100%"/></svg>
/// @type color model
$black-getronics: hsl(226°, 27%, 15%);
/// Dark Grey Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#6B7085" x="30" y="0" width="100%" height="100%"/></svg>
/// @type color model
$dark-grey-getronics: hsl(228°, 11%, 47%);
/// Grey Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#919AA1" x="30" y="0" width="100%" height="100%"/></svg>
/// @type color model
$grey-getronics: hsl(206°, 8%, 60%);
/// Light Grey Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#EDEDED" x="30" y="0" width="100%" height="100%"/></svg>
/// @type color model
$light-grey-getronics: hsl(0°, 0%, 93%);
/// White Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#FFFFFF" x="30" y="0" width="100%" height="100%"/></svg>
/// @type color model
$white: hsl(0°, 0%, 100%);
/// Blue <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#0000FF" x="30" y="0" width="100%" height="100%"/></svg>
/// @type color model
$blue: hsl(240°, 100%, 50%);
/// Green Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#56980B" x="30" y="0" width="100%" height="100%"/></svg>
/// @type color model
$green-approved: hsl(88°, 86%, 32%);
/// Dark Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#040F2A" x="30" y="0" width="100%" height="100%"/></svg>
/// @type Text-Colors
$dark: hsl(223°, 82%, 9%);
/// Medium Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#B4B7B3" x="30" y="0" width="100%" height="100%"/></svg>
/// @type Text-Colors
$medium: hsl(105°, 3%, 71%);
/// Light Getronics <svg xmlns="http://www.w3.org/2000/svg" width="250" height="30"><rect fill="#E2E2E4" x="30" y="0" width="100%" height="100%"/></svg>
/// @type Text-Colors
$light: hsl(240°, 2%, 89%);
/// dark shading
/// @type elements-Colors
$shade: hsla(0°, 0%, 0%, 0.4);
/// 20 Pixels
/// @type converted pixel size to rem
$px20: 1.25rem;
/// 15 Pixels
/// @type converted pixel size to rem
$px15: 0.9375rem;
/// 10 Pixels
/// @type converted pixel size to rem
$px10: 0.625rem;
/// 9 Pixels
/// @type converted pixel size to rem
$px9: 0.5625rem;
/// 8 Pixels
/// @type converted pixel size to rem
$px8: 0.5rem;
/// 7 Pixels
/// @type converted pixel size to rem
$px7: 0.4375rem;
/// 6 Pixels
/// @type converted pixel size to rem
$px6: 0.375rem;
/// 5 Pixels
/// @type converted pixel size to rem
$px5: 0.3125rem;
/// 4 Pixels
/// @type converted pixel size to rem
$px4: 0.25rem;
/// 3 Pixels
/// @type converted pixel size to rem
$px3: 0.1875rem;
/// 2 Pixels
/// @type converted pixel size to rem
$px2: 0.125rem;
/// 1 Pixel
/// @type converted pixel size to rem
$px1: 0.0625rem;
/// 645 Pixels
/// @type converted pixel size to rem
$px0: 0;

/// Cairo-Regular Font
@font-face {
  font-family: 'Cairo-Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Cairo-Regular'), local('Cairo'),
    url('/assets/fonts/cairo/Cairo-Regular.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/cairo/Cairo-Regular.woff') format('woff'),
    url('/assets/fonts/cairo/Cairo-Regular.woff2') format('woff2'),
    url('/assets/fonts/cairo/Cairo-Regular.ttf') format('truetype'),
    url('/assets/fonts/cairo/Cairo-Regular.svg#Cairo-Regular') format('svg');
}

/// Cairo-Bold Font
@font-face {
  font-family: 'Cairo-Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Cairo-Bold'), url('/assets/fonts/cairo/Cairo-Bold.ttf') format('truetype');
}

/// Cairo-ExtraLight Font
@font-face {
  font-family: 'Cairo-ExtraLight';
  font-style: normal;
  font-weight: normal;
  src: local('Cairo-ExtraLight'), url('/assets/fonts/cairo/Cairo-ExtraLight.ttf') format('truetype');
}

/// Cairo-Black Font
@font-face {
  font-family: 'Cairo-Black';
  font-style: normal;
  font-weight: normal;
  src: local('Cairo-Black'), url('/assets/fonts/cairo/Cairo-Black.ttf') format('truetype');
}

/// Cairo-Light Font
@font-face {
  font-family: 'Cairo-Light';
  font-style: normal;
  font-weight: normal;
  src: local('Cairo-Light'), url('/assets/fonts/cairo/Cairo-Light.ttf') format('truetype');
}

/// Cairo-SemiBold Font
@font-face {
  font-family: 'Cairo-SemiBold';
  font-style: normal;
  font-weight: normal;
  src: local('Cairo-SemiBold'), url('/assets/fonts/cairo/Cairo-SemiBold.ttf') format('truetype');
}

/// PageSans-Regular Font
@font-face {
  font-family: 'PageSans-Regular';
  font-style: normal;
  font-weight: normal;
  src: local('PageSans-Regular'), url('/assets/fonts/page-sans/PageSans-Regular.eot'),
    url('/assets/fonts/page-sans/PageSans-Regular.woff') format('woff'),
    url('/assets/fonts/page-sans/PageSans-Regular.ttf') format('truetype'),
    url('/assets/fonts/page-sans/PageSans-Regular.svg#PageSans-Regular') format('svg');
}

/// PageSans-Light Font
@font-face {
  font-family: 'PageSans-Light';
  font-style: normal;
  font-weight: normal;
  src: local('PageSans-Light'), url('/assets/fonts/page-sans/PageSans-Light.eot'),
    url('/assets/fonts/page-sans/PageSans-Light.woff') format('woff'),
    url('/assets/fonts/page-sans/PageSans-Light.ttf') format('truetype'),
    url('/assets/fonts/page-sans/PageSans-Light.svg#PageSans-Light') format('svg');
}

/// PageSans-Medium-0 Font
@font-face {
  font-family: 'PageSans-Medium';
  font-style: normal;
  font-weight: normal;
  src: local('ge_ss_text_medium_0-webfont'), url('/assets/fonts/page-sans/ge_ss_text_medium_0-webfont.eot'),
    url('/assets/fonts/page-sans/ge_ss_text_medium_0-webfont.eot?#iefix') format('eot'),
    url('/assets/fonts/page-sans/ge_ss_text_medium_0-webfont.woff') format('woff'),
    url('/assets/fonts/page-sans/ge_ss_text_medium_0-webfont.woff2') format('woff2'),
    url('/assets/fonts/page-sans/ge_ss_text_medium_0-webfont.ttf') format('truetype'),
    url('/assets/fonts/page-sans/ge_ss_text_medium_2.woff') format('woff'),
    url('/assets/fonts/page-sans/ge_ss_text_medium_2.svg#ge_ss_text_medium_2') format('svg'),
    url('/assets/fonts/page-sans/ge_ss_text_medium_0-webfont.svg#ge_ss_text_medium_0-webfont') format('svg');
}

/// WorkSans-Black Font
@font-face {
  font-family: 'WorkSans-Black';
  font-style: normal;
  font-weight: normal;
  src: local('WorkSans-Black'), url('/assets/fonts/work_sans/WorkSans-Black.woff2') format('woff2'),
    url('/assets/fonts/work_sans/WorkSans-Black.ttf') format('truetype');
}

/// WorkSans-Bold Font
@font-face {
  font-family: 'WorkSans-Bold';
  font-style: normal;
  font-weight: normal;
  src: local('WorkSans-Bold'), url('/assets/fonts/work_sans/WorkSans-Bold.woff2') format('woff2'),
    url('/assets/fonts/work_sans/WorkSans-Bold.ttf') format('truetype');
}

/// WorkSans-ExtraBold Font
@font-face {
  font-family: 'WorkSans-ExtraBold';
  font-style: normal;
  font-weight: normal;
  src: local('WorkSans-ExtraBold'), url('/assets/fonts/work_sans/WorkSans-ExtraBold.woff2') format('woff2'),
    url('/assets/fonts/work_sans/WorkSans-ExtraBold.ttf') format('truetype');
}

/// WorkSans-ExtraLight Font
@font-face {
  font-family: 'WorkSans-ExtraLight';
  font-style: normal;
  font-weight: normal;
  src: local('WorkSans-ExtraLight'), url('/assets/fonts/work_sans/WorkSans-ExtraLight.woff2') format('woff2'),
    url('/assets/fonts/work_sans/WorkSans-ExtraLight.ttf') format('truetype');
}
/// WorkSans-Light Font
@font-face {
  font-family: 'WorkSans-Light';
  font-style: normal;
  font-weight: normal;
  src: local('WorkSans-Light'), url('/assets/fonts/work_sans/WorkSans-Light.woff2') format('woff2'),
    url('/assets/fonts/work_sans/WorkSans-Light.ttf') format('truetype');
}
/// WorkSans-Medium Font
@font-face {
  font-family: 'WorkSans-Medium';
  font-style: normal;
  font-weight: normal;
  src: local('WorkSans-Medium'), url('/assets/fonts/work_sans/WorkSans-Medium.woff2') format('woff2'),
    url('/assets/fonts/work_sans/WorkSans-Medium.ttf') format('truetype');
}
/// WorkSans-Regular Font
@font-face {
  font-family: 'WorkSans-Regular';
  font-style: normal;
  font-weight: normal;
  src: local('WorkSans-Regular'), url('/assets/fonts/work_sans/WorkSans-Regular.woff2') format('woff2'),
    url('/assets/fonts/work_sans/WorkSans-Regular.ttf') format('truetype');
}

/// WorkSans-SemiBold Font
@font-face {
  font-family: 'WorkSans-SemiBold';
  font-style: normal;
  font-weight: normal;
  src: local('WorkSans-SemiBold'), url('/assets/fonts/work_sans/WorkSans-SemiBold.woff2') format('woff2'),
    url('/assets/fonts/work_sans/WorkSans-SemiBold.ttf') format('truetype');
}

/// WorkSans-Thin Font
@font-face {
  font-family: 'WorkSans-Thin';
  font-style: normal;
  font-weight: normal;
  src: local('WorkSans-Thin'), url('/assets/fonts/work_sans/WorkSans-Thin.woff2') format('woff2'),
    url('/assets/fonts/work_sans/WorkSans-Thin.ttf') format('truetype');
}

/// mixin that gives us the basic properties of the typography chosen
/// @access public
/// @author Adrián Castillo
/// @param {ffamily} $ffamily - property font family that specifies the font for an element.
/// @param {fweight} $fweight - property font weight that sets how thick or thin characters in text should be displayed.
/// @param {color} $color - property color that set the color of text.
/// @output 'all the properties of typography'. look at the example.
/// @example
/// this mixin assigns the first parameter property, the second parameter size in rem
/// fonts ('WorkSans-ExtraLight', bold, $blue-getronics);
///  --> (width: auto, height: 1.25rem, font-size: 1.125rem, font-family: "WorkSans-ExtraLight",
/// font-weight: bold, font-style: normal, font-stretch: normal, line-height: 1.11 ,letter-spacing: normal, color: #294199;)
@mixin fonts($ffamily, $fweight, $color) {
  width: auto;
  @include sizePxToRemProperty(height, 20px);
  @include sizePxToRemProperty(font-size, 18px);
  font-family: $ffamily;
  font-weight: $fweight;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.11;
  letter-spacing: normal;
  color: $color;
}
/// Page-Sans-Demi-Bold-dark font type specified in the style guide !! Demi is associated with medium waiting for an answer
.Page-Sans-Demi-Bold-dark {
  @include fonts(PageSans-Medium, bold, $dark);
}
/// Page-Sans-Demi-Bold-medium font type specified in the style guide !! Demi is associated with medium waiting for an answer
.Page-Sans-Demi-Bold-medium {
  @include fonts(PageSans-Medium, bold, $medium);
}
/// Page-Sans-Demi-Bold-light font type specified in the style guide !! Demi is associated with medium waiting for an answer
.Page-Sans-Demi-Bold-light {
  @include fonts(PageSans-Medium, bold, $light);
}
/// Page-Sans-Regular-dark font type specified in the style guide
.Page-Sans-Regular-dark {
  @include fonts(PageSans-Regular, normal, $dark);
}
/// Page-Sans-Regular-medium font type specified in the style guide
.Page-Sans-Regular-medium {
  @include fonts(PageSans-Regular, normal, $medium);
}
/// Page-Sans-Regular-light font type specified in the style guide
.Page-Sans-Regular-light {
  @include fonts(PageSans-Regular, normal, $light);
}
/// Page-Sans-Light-dark font type specified in the style guide
.Page-Sans-Light-dark {
  @include fonts(PageSans-Light, 300, $dark);
}
/// Page-Sans-Light-medium font type specified in the style guide
.Page-Sans-Light-medium {
  @include fonts(PageSans-Light, 300, $medium);
}
/// Page-Sans-Light-light font type specified in the style guide
.Page-Sans-Light-light {
  @include fonts(PageSans-Light, 300, $light);
}
/// Work-Sans-Medium-dark font type specified in the style guide
.Work-Sans-Medium-dark {
  @include fonts(WorkSans-Medium, 500, $dark);
}
/// Work-Sans-Medium-medium font type specified in the style guide
.Work-Sans-Medium-medium {
  @include fonts(WorkSans-Medium, 500, $medium);
}
/// Work-Sans-Medium-light font type specified in the style guide
.Work-Sans-Medium-light {
  @include fonts(WorkSans-Medium, 500, $light);
}
/// Work-Sans-Regular-dark font type specified in the style guide
.Work-Sans-Regular-dark {
  @include fonts(WorkSans-Regular, normal, $dark);
}
/// Work-Sans-Regular-medium font type specified in the style guide
.Work-Sans-Regular-medium {
  @include fonts(WorkSans-Regular, normal, $medium);
}
/// Work-Sans-Regular-light font type specified in the style guide
.Work-Sans-Regular-light {
  @include fonts(WorkSans-Regular, normal, $light);
}
/// Work-Sans-Light-dark font type specified in the style guide
.Work-Sans-Light-dark {
  @include fonts(WorkSans-Light, 200, $dark);
}
/// Work-Sans-Light-medium font type specified in the style guide
.Work-Sans-Light-medium {
  @include fonts(WorkSans-Light, 200, $medium);
}
/// Work-Sans-Light-light font type specified in the style guide
.Work-Sans-Light-light {
  @include fonts(WorkSans-Light, 200, $light);
}
/// Cairo-Bold-dark font type specified in the style guide
.Cairo-Bold-dark {
  @include fonts(Cairo-Bold, bold, $dark);
}
/// Cairo-Bold-medium font type specified in the style guide
.Cairo-Bold-medium {
  @include fonts(Cairo-Bold, bold, $medium);
}
/// Cairo-Bold-light font type specified in the style guide
.Cairo-Bold-light {
  @include fonts(Cairo-Bold, bold, $light);
}
/// Cairo-Semibold-dark font type specified in the style guide
.Cairo-Semibold-dark {
  @include fonts(Cairo-SemiBold, 600, $dark);
}
/// Cairo-Semibold-medium font type specified in the style guide
.Cairo-Semibold-medium {
  @include fonts(Cairo-SemiBold, 600, $medium);
}
/// Cairo-Semibold-light font type specified in the style guide
.Cairo-Semibold-light {
  @include fonts(Cairo-SemiBold, 600, $light);
}
/// Cairo-Regular-dark font type specified in the style guide
.Cairo-Regular-dark {
  @include fonts(Cairo-Regular, normal, $dark);
}
/// Cairo-Regular-medium font type specified in the style guide
.Cairo-Regular-medium {
  @include fonts(Cairo-Regular, normal, $medium);
}

/// Cairo-Regular-light font type specified in the style guide
.Cairo-Regular-light {
  @include fonts(Cairo-Regular, normal, $light);
}
/// Size of Headings when referring to tags.
/// Tags Heading1 & h1 with a size measure of 24 pixels
.heading1,
h1 {
  @include sizePxToRemProperty(font-size, 24px);
}
/// Tags Heading2 & h2 with a size measure of 20 pixels
.heading2,
h2 {
  @include sizePxToRemProperty(font-size, 20px);
}
/// Tags subtitle1, body1, div, span, ul, p & td with a size measure of 16 pixels
.subtitle1,
.body1,
div,
span,
ul,
p,
td {
  @include sizePxToRemProperty(font-size, 16px);
}

/// Tags subtitle2, body2, li & button with a size measure of 14 pixels
.subtitle2,
.body2,
li button {
  @include sizePxToRemProperty(font-size, 14px);
}

/// Tag caption with a size measure of 12 pixels
caption {
  @include sizePxToRemProperty(font-size, 12px);
}
/// Overline with a size measure of 10 pixels
.overline {
  @include sizePxToRemProperty(font-size, 10px);
}

/// Overline with a size measure of 10 pixels
button,
.overline {
  text-transform: capitalize;
  @include sizePxToRemProperty(width, 94px);
  @include sizePxToRemProperty(height, 36px);
  @include sizePxToRemProperty(border-radius, 3px);
  padding: 0.3em 2em;
  margin: 0 1em;
}

/// Orange button al-rajhi with predefined sizes & with inverse mode
button.button-getronics {
  background-color: $orange-getronics;
  color: white;
  border: 1px solid $orange-getronics;
  font-family: 'WorkSans-Regular';
  font-weight: 500;
  &.inverse {
    background-color: white;
    color: $orange-getronics;
    border: 2px solid $orange-getronics;
  }
  &.mat-icon-button {
    width: auto;
  }
}
/// button-getronics mat-icon-button
/// At the moment add font family
button.button-getronics span span {
  position: relative;
  @include sizePxToRemProperty(bottom, 9px);
  @include sizePxToRemProperty(right, 10px);
  font-family: 'WorkSans-Regular';
}
.style-guide .button-row {
  margin-top: 0.5em;
}
/// align icons on button Getronics
button.button-getronics mat-icon {
  vertical-align: baseline;
  position: relative;
  @include sizePxToRemProperty(right, 20px);
}
/// align icons on button Print. Excel, Pdf
.button-print-pdf-xls mat-icon {
  vertical-align: baseline;
  position: relative;
  @include sizePxToRemProperty(right, 20px);
}
/// Button print with printer icon
.button-print-pdf-xls {
  width: auto;
  box-shadow: 0 $px2 $px4 0 $shade;
  background-color: $white;
  border: 1px solid $light;
  cursor: pointer;
  @include sizePxToRemProperty(padding-right, 5px);
}
/// button text print
.button-print-pdf-xls span {
  position: relative;
  @include sizePxToRemProperty(bottom, 7px);
  @include sizePxToRemProperty(right, 10px);
  font-family: 'WorkSans-Regular';
}
/// button img excel
.button-print-pdf-xls img {
  @include sizePxToRemProperty(height, 24px);
  @include sizePxToRemProperty(width, 24px);
  @include sizePxToRemProperty(margin-left, -20px);
  @include sizePxToRemProperty(margin-right, 20px);
}
/// button all view
.button-allview {
  width: auto;
  cursor: pointer;
  box-shadow: 0 $px2 $px4 0 $shade;
  background-color: #ffffff;
  border: 1px solid $light;
  @include sizePxToRemProperty(padding-right, 5px);
}
/// button text all views
.button-allview span {
  position: relative;
  @include sizePxToRemProperty(bottom, 1px);
  @include sizePxToRemProperty(right, 10px);
  font-family: 'WorkSans-Regular';
  color: $blue-getronics;
}
/// round exchange button
.button-round-exchange {
  border-radius: 100%;
  cursor: pointer;
  @include sizePxToRemProperty(height, 40px);
  @include sizePxToRemProperty(width, 40px);
  object-fit: contain;
  background: $white;
  border: $px2 solid $light;
}
/// align round button exchange icon
.button-round-exchange mat-icon {
  @include sizePxToRemProperty(margin-left, -12px);
  @include sizePxToRemProperty(margin-top, 2px);
}

/// Color of the toggle slide bar, this color should go with the color of the theme
::ng-deep .mat-slide-toggle.mat-checked div.mat-slide-toggle-bar {
  background-color: $green-approved;
}

/// Color of the toggle slide button with the code
::ng-deep .mat-slide-toggle.mat-checked div.mat-slide-toggle-thumb {
  background-color: $white;
}
/// button style of the results pagination
.page-button {
  @include sizePxToRemProperty(width, 30px);
  @include sizePxToRemProperty(height, 39px);
  box-shadow: 0 $px2 $px4 0 $shade;
  background-color: $white;
  border: 0px solid;
  cursor: pointer;
  color: $grey-getronics;
  border: $px0 solid black;
  margin: $px0;
}

/// change of color on the pressed page
button.page-button:focus {
  color: $blue-getronics;
}
/// alignment of the icons of the page buttons
.page-button mat-icon {
  @include sizePxToRemProperty(margin-left, -15px);
  color: $dark-grey-getronics;
  @include sizePxToRemProperty(margin-top, 4px);
}
/// alignment of the text of the page buttons
.page-button span {
  @include sizePxToRemProperty(margin-left, -8px);
}

/// format Properties of the mat select box are selected and displayed options with edge and specific padding
#filter-rows-page mat-form-field div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix {
  width: 50px;
  left: 15px;
  border: $px1 solid $grey-getronics;
  padding: $px15 $px10 $px10 $px10;
}
/// Text color that refers to mat-select options
#filter-rows-page span {
  color: $grey-getronics;
}
/// Selection arrow in the mat-select
::ng-deep #filter-rows-page .mat-select-arrow {
  color: $dark-grey-getronics;
}
// Color of mat select options
::ng-deep #filter-rows-page mat-select span.mat-select-value-text > span {
  color: black;
}
/// Remove underline from mat-select
::ng-deep #filter-rows-page .mat-form-field-underline {
  display: none;
}
/// Configure the length of the toogle slide although missing long toggle end
// ::ng-deep mat-slide-toggle div.mat-slide-toggle-bar {
// width: 100px !important;
// }

/// @since December 2018 version principal