/* Google Sans Font */
/* Usage: font-family: 'Google Sans Regular', sans-serif; */

@font-face {font-family: "Google Sans Regular";
    src: url("../fonts/GoogleSans/google_sans_regular.eot"); /* IE9*/
    src: url("../fonts/GoogleSans/google_sans_regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/GoogleSans/google_sans_regular.woff2") format("woff2"), /* chrome、firefox */
    url("../fonts/GoogleSans/google_sans_regular.woff") format("woff"), /* chrome、firefox */
    url("../fonts/GoogleSans/google_sans_regular.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../fonts/GoogleSans/google_sans_regular.svg#Google Sans Regular") format("svg"); /* iOS 4.1- */
  }


  @font-face {font-family: "Google Sans Medium";
    src: url("../fonts/GoogleSans/google_sans_medium.eot"); /* IE9*/
    src: url("../fonts/GoogleSans/google_sans_medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/GoogleSans/google_sans_medium.woff2") format("woff2"), /* chrome、firefox */
    url("../fonts/GoogleSans/google_sans_medium.woff") format("woff"), /* chrome、firefox */
    url("../fonts/GoogleSans/google_sans_medium.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../fonts/GoogleSans/google_sans_medium.svg#Google Sans Regular") format("svg"); /* iOS 4.1- */
  }
  
  
  @font-face {font-family: "Google Sans Bold";
    src: url("../fonts/GoogleSans/google_sans_bold.eot"); /* IE9*/
    src: url("../fonts/GoogleSans/google_sans_bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/GoogleSans/google_sans_bold.woff2") format("woff2"), /* chrome、firefox */
    url("../fonts/GoogleSans/google_sans_bold.woff") format("woff"), /* chrome、firefox */
    url("../fonts/GoogleSans/google_sans_bold.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../fonts/GoogleSans/google_sans_bold.svg#Google Sans Regular") format("svg"); /* iOS 4.1- */
  }


  @font-face{
    font-family: "Product Sans Medium";
    src: url("../fonts/ProductSans/product_sans_medium.eot");
    src: url("../fonts/ProductSans/product_sans_medium.eot?#iefix")format("embedded-opentype"),
        url("../fonts/ProductSans/product_sans_medium.woff")format("woff"),
        url("../fonts/ProductSans/product_sans_medium.woff2")format("woff2"),
        url("../fonts/ProductSans/product_sans_medium.ttf")format("truetype"),
        url("../fonts/ProductSans/product_sans_medium.svg#Product Sans Medium")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}






/* Circular Font */
/* Usage: font-family: 'Circular Book', sans-serif; */

@font-face{
    font-family: 'Circular Light';
    src: url('../fonts/Circular/circularstd-light-webfont.eot');
    src: url('../fonts/Circular/circularstd-light-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Circular/circularstd-light-webfont.woff') format('woff'),
    url('../fonts/Circular/circularstd-light-webfont.svg#Circular Light') format('svg');
}

@font-face{
    font-family: 'Circular Book';
    src: url('../fonts/Circular/circularstd-book-webfont.eot');
    src: url('../fonts/Circular/circularstd-book-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Circular/circularstd-book-webfont.woff') format('woff'),
    url('../fonts/Circular/circularstd-book-webfont.svg#Circular Book') format('svg');
}


@font-face{
    font-family: 'Circular Bold';
    src: url('../fonts/Circular/circularstd-bold-webfont.eot');
    src: url('../fonts/Circular/circularstd-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Circular/circularstd-bold-webfont.woff') format('woff'),
    url('../fonts/Circular/circularstd-bold-webfont.svg#Circular Book') format('svg');
}


@font-face{
    font-family: 'Circular Bold Italic';
    src: url('../fonts/Circular/circularstd-book-italic-webfont.eot');
    src: url('../fonts/Circular/circularstd-book-italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Circular/circularstd-book-italic-webfont.woff') format('woff'),
    url('../fonts/Circular/circularstd-book-italic-webfont.svg#Circular Book') format('svg');
}


@font-face{
    font-family: 'Circular Black';
    src: url('../fonts/Circular/circularstd-black-webfont.eot');
    src: url('../fonts/Circular/circularstd-black-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Circular/circularstd-black-webfont.woff') format('woff'),
    url('../fonts/Circular/circularstd-black-webfont.svg#Circular Book') format('svg');
}




/* @font-face {
    font-family: 'Biotif Regular';
    src: url('../fonts/Biotif/biotif-regular-webfont.eot');
    src: url('../fonts/Biotif/biotif-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Biotif/biotif-regular-webfont.woff2') format('woff2'),
         url('../fonts/Biotif/biotif-regular-webfont.woff') format('woff'),
         url('../fonts/Biotif/biotif-regular-webfont.ttf') format('truetype'),
         url('../fonts/Biotif/biotif-regular-webfont.svg#biotifregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'Biotif Medium';
    src: url('../fonts/Biotif/biotif-medium-webfont.eot');
    src: url('../fonts/Biotif/biotif-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Biotif/biotif-medium-webfont.woff2') format('woff2'),
         url('../fonts/Biotif/biotif-medium-webfont.woff') format('woff'),
         url('../fonts/Biotif/biotif-medium-webfont.ttf') format('truetype'),
         url('../fonts/Biotif/biotif-medium-webfont.svg#biotifmedium') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'Biotif Book';
    src: url('../fonts/Biotif/biotif-book-webfont.eot');
    src: url('../fonts/Biotif/biotif-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Biotif/biotif-book-webfont.woff2') format('woff2'),
         url('../fonts/Biotif/biotif-book-webfont.woff') format('woff'),
         url('../fonts/Biotif/biotif-book-webfont.ttf') format('truetype'),
         url('../fonts/Biotif/biotif-book-webfont.svg#biotifbook') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'Biotif Semi Bold';
    src: url('../fonts/biotif-semibold-webfont.eot');
    src: url('../fonts/Biotif/biotif-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Biotif/biotif-semibold-webfont.woff2') format('woff2'),
         url('../fonts/Biotif/biotif-semibold-webfont.woff') format('woff'),
         url('../fonts/Biotif/biotif-semibold-webfont.ttf') format('truetype'),
         url('../fonts/Biotif/biotif-semibold-webfont.svg#biotifsemi_bold') format('svg');
    font-weight: normal;
    font-style: normal;

} */




/* CeraRoundFont */

@font-face{
    font-family: "CeraRoundProBold";
    src: url("../fonts/Cera-Round/CeraRoundProBold.eot");
    src: url("../fonts/Cera-Round/CeraRoundProBold.eot?#iefix")format("embedded-opentype"),
        url("../fonts/Cera-Round/CeraRoundProBold.woff")format("woff"),
        url("../fonts/Cera-Round/CeraRoundProBold.woff2")format("woff2"),
        url("../fonts/Cera-Round/CeraRoundProBold.ttf")format("truetype"),
        url("../fonts/Cera-Round/CeraRoundProBold.svg#Cera Round Pro Bold")format("svg");
    /* font-weight:normal;
    font-style:normal;
    font-display:swap; */
}


@font-face{
    font-family: "CeraRoundCYMedium";
    src: url("../fonts/Cera-Round/CeraRoundCYMedium.eot");
    src: url("../fonts/Cera-Round/CeraRoundCYMedium.eot?#iefix")format("embedded-opentype"),
        url("../fonts/Cera-Round/CeraRoundCYMedium.woff")format("woff"),
        url("../fonts/Cera-Round/CeraRoundCYMedium.woff2")format("woff2"),
        url("../fonts/Cera-Round/CeraRoundCYMedium.ttf")format("truetype"),
        url("../fonts/Cera-Round/CeraRoundCYMedium.svg#CeraRoundCYMedium")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}




@font-face{
    font-family: "Avenir Medium";
    src: url("../fonts/Avenir/AvenirMedium.eot");
    src: url("../fonts/Avenir/AvenirMedium.eot?#iefix")format("embedded-opentype"),
        url("../fonts/Avenir/AvenirMedium.woff")format("woff"),
        url("../fonts/Avenir/AvenirMedium.woff2")format("woff2"),
        url("../fonts/Avenir/AvenirMedium.ttf")format("truetype"),
        url("../fonts/Avenir/AvenirMedium.svg#Avenir Medium")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}


    




  
  /* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}



body, html {
	height: 100%;
	font-family: 'Google Sans Regular', sans-serif;
}




.empty-records {
	text-align: center; 
    padding: 25px;
    color: #a19f9f;
    /* font-size: 13px;  */
    /* font-style: italic;  */
}





/*////////////////////////////////////////////////////*/
/*                 WRAPPER | CONTAINERS               */
/*////////////////////////////////////////////////////*/


/* COMMON STYLES */

.container {
	display: flex;
	align-items: center;
	flex-direction: column;
	position: absolute;
	min-height: 100%;
	width: 100%;
	background-color: #d2d8d6;
	background-image: linear-gradient(315deg, #d2d8d6 0%, #dce8e0 74%);
}

.container-tab {
	display: flex;
	align-items: center;
	flex-direction: column;
	position: absolute;
	min-height: 100%;
	width: 100%;
	background-color: #f1f1f1;
}


.container-white {
	display: flex;
	/* align-items: center; */
    justify-content: center;
	/* flex-direction: column; */
	/* position: absolute; */
	min-height: 100%;
	width: 100%;
	
}


/* This is generic wrapper applies majority in most templates */
.wrapper {
    min-width: 1500px;
    padding-top: 120px;
    margin-bottom: 50px;
    box-sizing: border-box;
}

.section-wrapper {
    background: #fff;
	padding: 10px;
	margin-bottom: 30px;
	border-radius: 2px;
}

.search__result {
    background: #fff;
    padding: 20px 15px;
    margin-bottom: 40px;
    border-radius: 2px;
}





/* Form Overrides and Resets */

input {
    all: unset;
}
  
  
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
  
input[type='number'] {
    -moz-appearance: textfield;
}



textarea, textarea:focus
{
    font-family: 'Google Sans Regular', sans-serif; /* make your choice */
    font-size: 16px; /* make your choice */
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-apperarance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none;
    padding: 10px;
    resize: none;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;  /* this will solve the issue of overlapping the input filed in containing div */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

input[type="checkbox"] {
    
    appearance: checkbox; /* Restore native appearance */
    width: 20px;
    height: 20px;
    cursor: pointer;
  }




/* ///////////////////////// */
/*         PAGE TITLE        */
/* ///////////////////////// */

.page-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
}

.page-title-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.page-title {
    font-size: 25px; 
    color: #a9a9a9;
}


.page-generate-report {
    color: #c04b4b;
    font-family: "CeraRoundProBold";
    display: flex;
    align-items: center;
    text-decoration: none;
    border: 1px solid #c04b4b;
    padding: 0px 5px;
    border-radius: 15px;
}

.page-generate-report:hover {
    color: #579657;
    border: 1px solid #579657;
}


.page-generate-report img {
    width: 18px;
    margin-left: 7px;
    filter: brightness(0) saturate(100%) invert(36%) sepia(73%) saturate(464%) hue-rotate(320deg) brightness(101%) contrast(90%);
}

.page-generate-report:hover img {
    filter: brightness(0) saturate(100%) invert(52%) sepia(33%) saturate(530%) hue-rotate(71deg) brightness(94%) contrast(92%);
}







/*////////////////////////////////////////////////////*/
/*       SEARCH INPUTS FIELDS & DROPDOWN SELECT       */
/*////////////////////////////////////////////////////*/


.form-search-input {
	background: #fff;
	padding: 10px;
}

.form-search-input-field {
	width: 100%;
	font-size: 14px;
}

.form-search-input-field::placeholder {
    color: #a9a9a9;
}


.form-search-submit {
	background: #56cc89;
	border: none;
	padding: 0 20px;
	font-size: 15px; color: #fff;
	width: 100%;
	height: 100%;
}

.form-search-submit:hover {
	color: #dedede;
}



/*----------------------------*/
/*  Search Dropdown Select   */
/*----------------------------*/

.form-search-dropdown {
	width: 100%; /* field width */
	display: inline-block;
	position: relative;
	overflow: hidden;
	background: #fff;

	/*margin-right: 8px;*/
}


.form-search-dropdown:before, .form-search-dropdown:after {
  	content: '';
  	position: absolute;
  	z-index: 2;
  	top: 14px;
  	right: 10px;
  	width: 0;
  	height: 0;
  	border: 4px dashed;
  	border-color: #888888 transparent;
  	pointer-events: none;
}


.form-search-dropdown:before {
  	border-bottom-style: solid;
  	border-top: none;
}


.form-search-dropdown:after {
  	margin-top: 7px;
  	border-top-style: solid;
  	border-bottom: none;
}

.form-search-dropdown-select {
  	position: relative;
  	width: 130%;
  	margin: 0;
  	padding: 10px;
  	line-height: 19px;
  	font-size: 14px;
    font-family: 'Google Sans Regular', sans-serif;
  	color: #a9a9a9;
  	text-shadow: 0 1px white;
  	background: #f2f2f2; /* Fallback for IE 8 */
  	background: rgba(0, 0, 0, 0) !important; /* "transparent" doesn't work with Opera */
  	border: 0;
  	border-radius: 0;
  	-webkit-appearance: none;
}


.form-search-dropdown-select:focus {
  	z-index: 3;
  	width: 100%;
  	color: #000000;
  	outline: none;
}


.form-search-dropdown-select > option {
  	margin: 3px;
  	padding: 5px 10px;
  	text-shadow: none;
  	background: #f2f2f2;
  	border-radius: 3px;
  	cursor: pointer;
}


/* Fix for IE 8 putting the arrows behind the select element. */

.lt-ie9 .form-search-dropdown {
    z-index: 1;
}

.lt-ie9 .form-search-dropdown-select {
    z-index: -1;
}

.lt-ie9 .form-search-dropdown-select:focus {
    z-index: 3;
}

/* Dirty fix for Firefox adding padding where it shouldn't. */

@-moz-document url-prefix() {
    .form-search-dropdown-select {
        padding-left: 6px;
    }
}






/* ///////////////////////////////////// */
/*          FORM CALL TO ACTION          */
/* ------------------------------------- */


.form__module__add__cta span {
    font-family: 'Google Sans Regular', sans-serif;
    margin-left: 5px; 
    font-size: 15px;
    color: #369839;
}

.form__module__add__cta i {
    color: #369839;
    font-size: 14px
}




.form__module__update__cta span {
    font-family: 'Google Sans Regular', sans-serif;
    margin-left: 5px; 
    font-size: 15px;
    color: #b69453;
}

.form__module__update__cta i {
    color: #b69453;
    font-size: 14px
}

.form__module__update__cta a > i {
    color: #b69453;
}


.action-update {
    color: #ffc300;
    font-size: 14px;
    transition: all 0.5s ease;
}

.action-update:hover {
    color: #9a7806;
}

.action-create {
    color: #369839;
    font-size: 14px
}

.action__th {
    /* padding: 7px; */
	/* background: #e1e2db; */
	font-size: 14px;
	text-align: center;
	color: #635f5f;
	font-weight: lighter;
    vertical-align: middle;
}


.action__td {
    padding: 7px;
    font-size: 14px;
	vertical-align: middle;
    text-align: center;
}








/* ERRORS */
.field-error-wrapper {
    text-align: center;
    margin-bottom: 10px;
}

.error {
    color: red;
    font-size: 15px;
    font-style: italic;
}






/* LOAD MORE */
.load-more {
    text-align: center;
}

.load-more-button {
    font-family: "Gotham Rounded Bold", sans-serif;
    text-transform: uppercase;
    color: #c34141;
    transition: all 0.5s ease;
    cursor: pointer;
}

.load-more-button:hover {
    color: red;
}

.load-more-padding {
    padding-top: 30px;
}



/* Before Delete Check jobcard create form, affected  */

/* For Testing */


.input-container {
    position: relative;
    display: inline-block;
}


.field-svg-icon {
    position: absolute;
    right: 10px; /* Adjust as needed based on the desired spacing */
    top: 50%;
    transform: translateY(-50%);
    /*fill: #555;*/     /* Adjust the color as needed */
    width: 18px; /* Adjust the width and height as needed */
    height: 18px;
    /* background: red; */
}

.field-svg-icon img {
    width: 18px;
    filter: brightness(0) saturate(100%) invert(66%) sepia(1%) saturate(333%) hue-rotate(314deg) brightness(89%) contrast(80%);
}





/* //////////////////////////////////////////// */
/*         COMMONS STYLES AND PLUGABLES         */
/* //////////////////////////////////////////// */

/* Accents and SVG Filter */
.filter_01 {
    filter: invert(33%) sepia(17%) saturate(2254%) hue-rotate(314deg) brightness(102%) contrast(81%);
    margin-left: 5px;
}
.filter_02 {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(326deg) brightness(103%) contrast(101%);
}