/* ==================================================== */
/* ===================    COMMON    =================== */
/* ==================================================== */

* {
	margin: 0px; 
	padding: 0px;
	
	text-decoration: none;
   	font-family: var(--font-family-common); 
   	font-size: var(--font-size-common); 
    font-weight: 400;
   	font-style: normal; 
   	color: var(--font-color-common); 
}

html {
	height: 100%; 
	width: 100%; 
}
body {
	display: grid;
	grid-template-rows: auto auto auto auto auto 1fr auto;
	/* header - menu - search - menu-2 - shadow - content - status */

	height: 100vh; /* fill entire viewport height */
    width: 100%;
    min-width: 530px; 
    max-width: 2100px;

    cursor: default;
}
body.waiting_cursor * {
  cursor: wait !important;
}

/* ==================================================== */
/* =================    MAJOR IDS    ================== */
/* ==================================================== */

#startform{
    display: grid; 
    min-width: 250px;
    max-width: 320px; 
    align-content: center;

    padding: 10px;
    background-color: var(--background-main);
    border-radius: var(--border-common-radius);
    border: var(--border-common-thickness) solid var(--border-tab-color);
    /*box-shadow: 4px 4px 7px 0px rgba(0, 0, 0, 0.1),
               -4px 4px 7px 0px rgba(0, 0, 0, 0.1); */
}

#top_header_line {
	display: grid;
	grid-template-columns: 1fr auto;

	padding: var(--padding-common); 
	padding-left: var(--padding-header-sides); 
	padding-right: var(--padding-header-sides); 

	background-color: var(--background-header); 
	color: white;
	align-items: center;
	z-index: 10;
	user-select: none;
}
#menu_line{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto 1fr auto auto;
	/* order - pers - gear - contr - __ - inv - __ - set - () */
	z-index: 10;
}
#menu_line_aux{
	display: grid;
	grid-template-columns: auto 1fr auto;

	padding-top: calc(var(--gap-columns-common) * 2);
	background-color: var(--background-main);
}
.menu_line_aux_empty_space{
	border-bottom: var(--border-common-thickness) solid var(--border-tab-color);
}
#menu_line_aux_orders{
	display: none;
	grid-template-columns: 1fr auto auto auto auto;
	
	/*padding-top: calc(var(--gap-columns-common)*2);*/
	/*margin-bottom: var(--gap-columns-common);*/

	/*background-color: var(--background-main);*/
	/*border-image-source: linear-gradient(to left, var(--border-tab-color) 20%, var(--background-main) 60%);
	border-image-slice: 1;
	border-width: var(--border-common-thickness);
	border-style: solid; 
	border-right: none; border-left: none; border-bottom: none;*/
}
#menu_line_aux_personnel{
	display: none;
	grid-template-columns: 1fr auto auto auto auto;
	
	/*padding-top: calc(var(--gap-columns-common)*2);*/
	/*margin-bottom: var(--gap-columns-common);*/

	/*background-color: var(--background-main);*/
	/*border-image-source: linear-gradient(to left, var(--border-tab-color) 20%, var(--background-main) 60%);
	border-image-slice: 1;
	border-width: var(--border-common-thickness);
	border-style: solid; 
	border-right: none; border-left: none; border-bottom: none;*/
}
#small_menu_line_1{
	display: grid;
	grid-template-columns: 1fr auto auto auto 20px;
}
#status_line{
	display: grid;
	grid-template-columns: auto 1fr;
	border-top: var(--border-common-thickness) solid var(--border-tab-color); 
	padding: var(--padding-common);
	padding-left: var(--padding-common-sides);
	min-height: 16px;
	margin-top: var(--gap-columns-common);
	z-index: 10;
	/*box-shadow: 0px 10px 13px 4px var(--background-header);*/
}
#response{
	display: grid;
    align-items: center;
	text-wrap: nowrap;
	overflow-x: hidden;

	padding-left: var(--padding-common-sides);
	padding-right: var(--padding-common-sides);
	border-radius: var(--border-common-radius);
}
#latency{
    display: grid;
    grid-template-columns: 1fr 16px 50px;
    column-gap: var(--gap-columns-common);

    padding-top: 1px;
    padding-bottom: 1px;
    text-align: right;
    align-items: center;
}
#latency_ms{
	text-align: left;
}

		/* ============================= */
		/* =======  SEARCH BARS  ======= */
		/* ============================= */

#search_bar_Orders{
	/*display: grid;
	grid-template-columns: auto auto auto 1fr 245px 245px auto;  */
						/* 180px 200px 200px 200px auto auto 1fr */
	/*display: flex;*/
	flex-wrap: wrap;
}

		/* ============================= */
		/* =========   PAGES   ========= */
		/* ============================= */

/* ============================= */
/* =========   ORDERS   ======== */
/* ============================= */

#page_orders{
	/*display: grid;*/
	/*grid-template-columns: 1fr 27% 23% 23%;*/
	column-gap: var(--gap-columns-common);
}
.orders-1234{ 
	grid-template-columns: 
		minmax(var(--page_orders-min-col-1), 1fr) 
		minmax(var(--page_orders-min-col-2), 27%) 
		minmax(var(--page_orders-min-col-3), 23%) 
		minmax(var(--page_orders-min-col-4), 23%);
	/* list - details - docs - pers */
}
.orders-123{
	grid-template-columns: 
		minmax(var(--page_orders-min-col-1), 1fr) 
		minmax(var(--page_orders-min-col-2), 35%) 
		minmax(var(--page_orders-min-col-3), 30%) !important;
}
.orders-124{
	grid-template-columns: 
		minmax(var(--page_orders-min-col-1), 1fr) 
		minmax(var(--page_orders-min-col-2), 35%) 
		minmax(var(--page_orders-min-col-4), 30%) !important;
}
.orders-12{
	grid-template-columns: 
		minmax(var(--page_orders-min-col-1), 1fr) 
		minmax(var(--page_orders-min-col-2), 50%) !important;
}
.orders-13{
	grid-template-columns: 
		minmax(var(--page_orders-min-col-1), 1fr) 
		minmax(var(--page_orders-min-col-3), 50%) !important;
}
.orders-14{
	grid-template-columns: 
		minmax(var(--page_orders-min-col-1), 1fr) 
		minmax(var(--page_orders-min-col-4), 50%) !important;
}
.orders-1{
	grid-template-columns: 
		minmax(var(--page_orders-min-col-1), 1fr) !important;
	grid-auto-rows: auto; 
	/*justify-items: center;   */
    /*justify-content: center; */
}
.main_column_hide{
	display: none !important;
}


#orders_column_1{ 
	display: grid; 
	position: relative;
	grid-template-rows: auto 1fr;
	overflow-y: hidden; 
}
#orders_column_3{ 
	/*display: grid; 
	position: relative;
	grid-template-rows: auto 1fr;
	overflow-y: hidden; */
}
#orders_table_header{
	display: grid;
	grid-template-columns: 62px 1fr 84px !important;
	column-gap: var(--gap-columns-common);
	border-radius: 0px var(--border-common-radius) 0px 0px;

	position: sticky; /* to be on safe side and avoid scrolling */
	top: 0px; 
	z-index: 9;
}
#orders_table_body{
	position: relative;
	overflow-y: scroll; /* auto; */
	min-height: 0px; /* supposed to be important, for not expending beyon the parent's borders... */

	border-right: var(--border-common-thickness) solid var(--border-container-color);
	/*margin-bottom: calc(-1*var(--gap-columns-common));*/
}

/* ============================= */
/* =======   PERSONNEL   ======= */
/* ============================= */

#page_personnel{
	/*display: grid;*/
	/*grid-template-columns: 1fr 27% 23% 23%;*/
	column-gap: var(--gap-columns-common);
}
.personnel-1234{ 
	grid-template-columns: 
		minmax(var(--page_personnel-min-col-1), 1fr) 
		minmax(var(--page_personnel-min-col-2), 27%) 
		minmax(var(--page_personnel-min-col-3), 23%) 
		minmax(var(--page_personnel-min-col-4), 23%);
	/* list - details - docs - pers */
}
.personnel-123{
	grid-template-columns: 
		minmax(var(--page_personnel-min-col-1), 1fr) 
		minmax(var(--page_personnel-min-col-2), 35%) 
		minmax(var(--page_personnel-min-col-3), 30%) !important;
}
.personnel-124{
	grid-template-columns: 
		minmax(var(--page_personnel-min-col-1), 1fr) 
		minmax(var(--page_personnel-min-col-2), 35%) 
		minmax(var(--page_personnel-min-col-4), 30%) !important;
}
.personnel-12{
	grid-template-columns: 
		minmax(var(--page_personnel-min-col-1), 1fr) 
		minmax(var(--page_personnel-min-col-2), 50%) !important;
}
.personnel-13{
	grid-template-columns: 
		minmax(var(--page_personnel-min-col-1), 1fr) 
		minmax(var(--page_personnel-min-col-3), 50%) !important;
}
.personnel-14{
	grid-template-columns: 
		minmax(var(--page_personnel-min-col-1), 1fr) 
		minmax(var(--page_personnel-min-col-4), 50%) !important;
}
.personnel-1{
	grid-template-columns: 
		minmax(var(--page_personnel-min-col-1), 1fr) !important;
	grid-auto-rows: auto; 
	/*justify-items: center;   */
    /*justify-content: center; */
}
.personnel_column_hide{
	display: none !important;
}


#personnel_column_1{ 
	display: grid; 
	position: relative;
	grid-template-rows: auto 1fr;
	overflow-y: hidden; 
}
#personnel_table_header{
	display: grid;
	grid-template-columns: 32px 1fr 1fr 80px !important;
	column-gap: var(--gap-columns-common);
	border-radius: 0px var(--border-common-radius) 0px 0px;

	position: sticky; /* to be on safe side and avoid scrolling */
	top: 0px; 
	z-index: 9;
}
#personnel_table_body{
	position: relative;
	overflow-y: scroll; /* auto; */
	min-height: 0px; /* supposed to be important, for not expending beyon the parent's borders... */

	border-right: var(--border-common-thickness) solid var(--border-container-color);
	/*margin-bottom: calc(-1*var(--gap-columns-common));*/
}


/* ==================================================== */
/* ===================    INPUT    ==================== */
/* ==================================================== */

input {
	display: grid;

	width: auto; /* 100%; */
	min-width: 15px;

	height: auto;
	min-height: var(--min-height-input); 
	
	background-color: var(--background-input); 
	border: var(--border-common-thickness) solid var(--border-input-color); 
	border-radius: var(--border-common-radius); 	
	
	padding-left: var(--padding-common-sides); 
	padding-right: var(--padding-common-sides); 
	padding-top: var(--padding-input-top); 
	padding-bottom: var(--padding-input-bottom); 

	margin-bottom: var(--margin-input-bottom); 

	outline: 0 !important;
	overflow-x: hidden;
	cursor: default;
}

input::-moz-placeholder { color: #D6DBDF; }
input::-webkit-input-placeholder { color: #D6DBDF; }

input[type="checkbox"] {
	/*max-width: fit-content;*/

	margin: 0px;
	/*margin-left: var(--margin-checkbox-sides); 
	margin-right: var(--margin-checkbox-sides); */

	padding: 0px;
	
	align-self: center;
	accent-color: var(--background-checkbox); /* GREEN was too anoying... so got back to default */
}

input[type="radio"] {
	min-width: 12px;
	min-height: 12px;

	max-width: 12px;
	max-height: 12px;
	margin: 0px;
	padding: 0px;
	accent-color: var(--background-checkbox); 
}

input:read-only {
    /*background-color: var(--background-main);*/
}

/* ==================================================== */
/* ===================    LABEL    ==================== */
/* ==================================================== */

label {
	display: grid;

	min-width: 15px;

	height: auto; /* 20px;*/
	min-height: var(--min-height-input); 
	
	/*padding-right: var(--padding-common-sides);*/
	padding-top: var(--padding-label-top); 
	padding-bottom: var(--padding-input-bottom); 

	margin-bottom: var(--margin-input-bottom); 

	white-space: nowrap;
	/*cursor: pointer;*/
	user-select: none;
}

/* ==================================================== */
/* ==================    TEXTAREA    ================== */
/* ==================================================== */

textarea {
	display: grid;

	width: auto; /* 100%; */
	min-width: 15px;

	height: auto;
	min-height: var(--min-height-input); 
	max-height: 54px;

	background-color: var(--background-input); 
	border: var(--border-common-thickness) solid var(--border-input-color);
	border-radius: var(--border-common-radius);	
	
	padding-left: var(--padding-common-sides); 
	padding-right: var(--padding-common-sides);
	padding-top: var(--padding-input-top); 
	padding-bottom: var(--padding-input-bottom); 

	margin-bottom: var(--margin-input-bottom);  

	outline: 0 !important;
	/*overflow-x: hidden;*/
	cursor: default;
	resize: vertical;
}

/* ==================================================== */
/* ===================    BUTTON    =================== */
/* ==================================================== */

button {
	display: grid;

	height: auto; /* 20px;*/
	min-height: 16px;

	width: fit-content;
	min-width: 15px;
	
	padding-left: var(--padding-common-sides); 
	padding-right: var(--padding-common-sides);
	padding-top: var(--padding-input-top); 
	padding-bottom: var(--padding-input-bottom); 

	margin-top: var(--padding-common-sides);
	margin-bottom: var(--margin-input-bottom); 
	margin-left: auto;

	align-items: center; 
	cursor: pointer;
}

/* ==================================================== */
/* ===================     LINK     =================== */
/* ==================================================== */

a {
    display: grid;
    align-items: center;
    white-space: nowrap; 
    /*padding-right: var(--padding-common-sides); */
    /*padding-top: 2px;*/
    text-decoration: underline;
    color: blue;
}

/* ==================================================== */
/* =================  PASSWORD ICON  ================== */
/* ==================================================== */

.password_icon {
    display: block; 
    position: absolute; 
    /*float: right !important*/
    top: 0px; 
    right: 4px; 
    width: 18px; 
    height: 18px; 
    background-image: url('../pics/view.svg');
}
.password_icon.view {
    background-image: url("../pics/no-view.svg") !important; /* 0 0 no-repeat */
}
.pass_icon_wrapper {
	display: grid; 
	grid-template-columns: 1fr;
	position: relative;
}

/* ==================================================== */
/* =================  TOGGLE SWITCH  ================== */
/* ==================================================== */

.switch {
    position: relative;
    display: inline-block;
    min-height: 0px !important;
    width: var(--toggle-width);
    height: calc(var(--toggle-half-height) * 2);

    padding: 0px;
    margin-top: -1px;
    margin-bottom: 0px;
}
.switch input {   	/* Hide the default checkbox */
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle_label{
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	margin-bottom: 0px !important;
}
.slider {     		/* Slider track */
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border: var(--border-common-thickness) solid var(--border-tab-color);
    border-radius: var(--toggle-half-height);
}
.slider::before {    /* Slider knob */
    position: absolute;
    content: "";
    height: var(--toggle-slider-hight);
    width: var(--toggle-slider-hight);
    left: var(--toggle-quarter-gap);
    bottom: var(--toggle-quarter-gap); 
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* When checked */
.switch input:checked + .slider {
    background-color: var(--background-checkbox_2);
}

.switch input:checked + .slider::before {
    transform: translateX(calc(var(--toggle-width) - calc(var(--toggle-half-height) * 2)));
}

/* ==================================================== */
/* =================   TAB BUTTONS   ================== */
/* ==================================================== */

.tab_button{ 
	background-color: var(--background-tab-button); 

	border-bottom: var(--border-common-thickness) solid var(--border-tab-color);
	/*border-left: var(--border-common-thickness) solid var(--border-tab-color-alter);
	border-right: var(--border-common-thickness) solid var(--border-tab-color-alter);*/

  	padding-left: var(--padding-tab-sides-inactive);
  	padding-right: var(--padding-tab-sides-inactive);
	padding-top: var(--padding-tab-top);
	padding-bottom: var(--padding-tab-bottom);

	cursor: pointer;
	user-select: none;
}
.tab_button:first-child{
	border-left: none !important;
	padding-left: var(--padding-tab-sides) !important;
}
#tab_filters{
	min-width: 16px;
	background-color: var(--background-main); 

	border-left: var(--border-common-thickness) solid var(--border-tab-color);
	border-bottom: var(--border-common-thickness) solid var(--background-main);
	border-right: none;

	background-image: url("../pics/imageres_5101.ico");
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-position: center;
}
.tab_filters_show{
	background-image: url("../pics/imageres_5100.ico") !important;
}
.tab_active{
	background-color: var(--background-main); 

	border-left: var(--border-common-thickness) solid var(--border-tab-color);
	border-right: var(--border-common-thickness) solid var(--border-tab-color);
	border-bottom: var(--border-common-thickness) solid var(--background-main);
	border-top: var(--border-common-thickness) solid var(--background-main);

	padding-left: var(--padding-tab-sides);
  	padding-right: var(--padding-tab-sides);
}
.tab_dummy{
	cursor: default !important;
	padding-left: var(--padding-common-sides) !important;
	padding-right: var(--padding-common-sides) !important;	
}
.tab_before_invoice{
	min-width: 80px; /* might be not suitable for all instances; will see */
}
.tab_button:hover{
	background-color: var(--hover-tab-button);
}
.tab_active:hover{
	background-color: var(--background-main); 
}
.tab_dummy:hover{
	background-color: var(--background-tab-button);
}

		/* ============================= */
		/* =======  UPSIDE DOWN  ======= */
		/* ============================= */

.tab_button_upsidedown{ 
	background-color: var(--background-main); 

	border-bottom: var(--border-common-thickness) solid var(--border-tab-color);
	/*border-left: var(--border-common-thickness) solid var(--border-tab-color-alter);
	border-right: var(--border-common-thickness) solid var(--border-tab-color-alter);*/

  	padding-left: var(--padding-tab-sides-inactive);
  	padding-right: var(--padding-tab-sides-inactive);
	padding-top: var(--padding-tab-top);
	padding-bottom: var(--padding-common); /* var(--padding-tab-bottom); */

	cursor: pointer;
	user-select: none;
}
.tab_button_upsidedown:last-child{
	border-right: none !important;
	padding-right: var(--padding-tab-sides) !important;
}
.tab_active_upsidedown{
	background-color: var(--background-tab-button); 	

	border-left: var(--border-common-thickness) solid var(--border-tab-color);
	border-right: var(--border-common-thickness) solid var(--border-tab-color);
	border-bottom: var(--border-common-thickness) solid var(--border-tab-color-alter);
	border-top: var(--border-common-thickness) solid var(--border-tab-color);

	border-radius: var(--border-common-radius) var(--border-common-radius) 0px 0px;

	padding-left: var(--padding-tab-sides);
  	padding-right: var(--padding-tab-sides);
}
.tab_button_upsidedown.tab_dummy:hover{
	background-color: var(--background-main);
}
.tab_button_upsidedown:hover{
	background-color: var(--hover-tab-button);	
}
.tab_active_upsidedown{
	background-color: var(--background-tab-button) !important;	
}
.tab_hidden{
	display: none;
} 

/* ==================================================== */
/* ==============    VISUAL EFFECTS    ================ */
/* ==================================================== */

.greenish{
    background-color: #90ee904a !important;
}
.deactivated {
	color: lightgrey;
}
.scroll_hidden{	
	overflow-y: scroll;
	-ms-overflow-style: none;  /* IE 10+ */   
	scrollbar-width: none; /* Firefox */ 
}
.scroll_hidden::-webkit-scrollbar { 
	/* chrome based */ 
	width: 0px;  /* ширина scrollbar'a */ 
	background: transparent;  /* опционально */ 
}
.line_aux_shadow{
	position: relative;
	background: linear-gradient(to bottom, white 75%, transparent 95%); 
	height: 8px; 
	z-index: 9; 
	margin-bottom: -7px;
}
.crop_the_text{
	white-space: nowrap;
  	overflow: hidden;
	text-overflow: ellipsis;
}
.log_out{
	color: inherit;
	text-decoration: none;
}
.log_out:hover{
	text-decoration: underline;
}
.top_header_line_insert_1{
	display: grid; 
	grid-template-columns: auto 1fr; 
	color: inherit;
}
.top_header_line_logout{
	text-align: right; 
	color: inherit;
}

.blinking_text{
	animation: blinking_text 1s infinite;
	/*background-color: var(--background-tooltip);*/
}

/*@keyframes blinking_text {
    0%   { opacity: 1; }
    50%  { opacity: 0.25; }
    100% { opacity: 1; }
}*/
@keyframes blinking_text {
    0%   { background-color: var(--background-tooltip); }
    50%  { background-color: transparent; }
    100% { background-color: var(--background-tooltip); }
}

		/* ========================= */
		/* ======   BORDERS   ====== */
		/* ========================= */	

.gradient_border_left{
	color: inherit;
	border-image: var(--border-gradient_1);	  
	border-width: var(--border-common-thickness);
	border-style: solid; 
	border-right: none; border-top: none; border-bottom: none;
}
.gradient_border_right{
	color: inherit;
	border-image:var(--border-gradient_1);	  
	border-width: var(--border-common-thickness);
	border-style: solid; 
	border-left: none; border-top: none; border-bottom: none;
}
.gradient_border_right_2{
	border-image: var(--border-gradient_4);	  
	border-width: var(--border-common-thickness);
	border-style: solid; 
    border-left: none;
    border-top: none;
    border-bottom: none;

    padding-right: var(--padding-common);
}
.gradient_border_sides{
	color: inherit;
	border-image: var(--border-gradient_1);	  
	border-width: var(--border-common-thickness);
	border-style: solid; 
	border-top: none; border-bottom: none;
}
.big-pin{
	color: inherit;
	padding-left: 8px; 
	margin-left: 8px; 
	border-image: var(--border-gradient_2);	/* _1 */  
	border-width: var(--border-common-thickness);
	border-style: solid; 
	border-right: none; border-top: none; border-bottom: none;
}
.big-pin_2{
	display: grid;
	align-content: center;
	padding-left: 8px; 
	margin-left: 8px; 

	border-image: var(--border-gradient_2);	  
	border-width: var(--border-common-thickness);
	border-style: solid; 
	border-right: none; border-top: none; border-bottom: none;

	color: inherit; 
}
/*.big-pin_3{
	color: inherit;
	border-image: var(--border-gradient_2);
	border-width: var(--border-common-thickness);
	border-style: solid; 
	border-left: none; border-top: none; border-bottom: none;
}*/

		/* ========================= */
		/* ===   ICONS & IMAGES  === */
		/* ========================= */	

.uma_icon{
	height: 16px;
	/*width: 11px;*/
	margin-bottom: 2px;
	margin-top: 2px;
	filter: brightness(0) invert(1);
}
.header_icon{
	height: 16px;
	/*width: 16px;*/
	filter: drop-shadow(0px 0px 0px black);
}
.aka_desktop_icon_32{
	height: 32px;
	/*width: 16px;*/
	filter: drop-shadow(0px 0px 0px black);
}
.latency_icon{
	height: 16px;
	margin-bottom: 2px;
}


/* ==================================================== */
/* =====================  MEDIA  ====================== */
/* ==================================================== */

		/* ========================= */
		/* ====  PASSWORD ICON  ==== */
		/* ========================= */

@media screen and (max-width: 600px) {
    .password_icon{ top: -36px; }
}

		/* ========================= */
		/* =======  QFC LIST  ====== */
		/* ========================= */

@media screen and (min-width: 1880px){
}
@media screen and (min-width: 1446px) and (max-width: 1879px){
	
}
@media screen and (min-width: 976px) and (max-width: 1445px){
	
}

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


/* ==================================================== */
/* ===================  MEDIA END  ==================== */
/* ==================================================== */


/* ==================================================== */
/* =================   CUSTOM INPUTS   ================ */
/* ==================================================== */

.custom_input_wrapper{
	display: grid; 
	grid-template-columns: 1fr var(--input-tail-outer-width);
	grid-template-areas: "field tail";
	position: relative;	
}
.custom_wrapper_minus{
	grid-template-columns: var(--input-tail-outer-width) 1fr;
	grid-template-areas: "tail field";
}

/*
.custom_input_wrapper > :not(.input_select):not(.input_calendar):not(.select_tail):not(.calendar_grid):not(.select_grid) {
  display: contents !important;
}*/
/*.custom_input_inner_wrapper{
	
}*/
.input_select { grid-area: field; }
.input_calendar{ grid-area: field; }
.select_tail  { grid-area: tail; }

.custom_input_wrapper:hover > .input_select,
.custom_input_wrapper:hover > .input_calendar, 
.editable_input:hover {
	background-color: var(--hover-element);
}

.custom_input_tail{
	min-width: var(--input-tail-width);

	height: auto;
	min-height: var(--min-height-input); 
	
	background-color: var(--background-input); 
	border: var(--border-common-thickness) solid var(--border-input-color);
	border-left: var(--border-common-thickness) solid var(--background-input);
	border-radius: 0 var(--border-common-radius) var(--border-common-radius) 0; 	

	padding-top: var(--padding-input-top); 
	padding-bottom: var(--padding-input-bottom); 
	margin-bottom: var(--margin-input-bottom); 

	background-position: center;
	background-repeat: no-repeat;
	/*background-size: contain; */
	/*background-size: cover; */

	cursor: pointer;
	user-select: none;
}
.calendar_tail{
	background-image: url('../pics/calendar_5.png'); /* calendar-icon.png /  / */
	background-size: 15px 15px;
}
.select_tail{
	background-image: url('../pics/arrow_2.png');
	background-size: 9px 9px;
}
.up_tail{
	background-image: url('../pics/icons8-arrow-up.png');
	background-size: 9px 9px;
	border-left: var(--border-common-thickness) solid var(--border-input-color) !important;	
}
.down_tail{
	background-image: url('../pics/icons8-arrow-down.png');
	background-size: 9px 9px;
}
.input_calendar, .input_select{
	border-radius: var(--border-common-radius) 0 0 var(--border-common-radius); 
	/*border-right: none !important;*/
}
.input_calendar{  
	width: var(--size-date);	
}

.radio_tail{
	min-width: var(--input-tail-width);

	height: auto;
	min-height: var(--min-height-input); 
	
	background-color: var(--background-input); 
	border: var(--border-common-thickness) solid var(--border-input-color);
	border-left: none;
	border-radius: 0 var(--border-common-radius) var(--border-common-radius) 0; 	

	/*padding-top: var(--padding-input-top); */
	/*padding-bottom: var(--padding-input-bottom); */
	margin-bottom: var(--margin-input-bottom); 

	display: grid;
    align-content: center;
    justify-content: center;

	cursor: pointer;
	user-select: none;
}

		/* ========================= */
		/* ====     CALENDAR    ==== */
		/* ========================= */

.calendar_grid {
 	position:absolute; 

 	display: grid;
  	grid-template-columns: 1fr; 
  	grid-auto-rows: auto; 

  	transition: opacity 0.3s ease, visibility 0.3s ease;

  	top: 23px;
  	right: 0; /* left: 0; */

  	width: fit-content;
  	max-width: fit-content;
  	font: inherit;

    border: var(--border-common-thickness) solid var(--border-container-color);  /* --border-input-color */
    border-radius: var(--border-common-radius);
    
    outline: 0 !important;   
	background-color: var(--background-input);
		box-shadow: 4px 4px 7px 0px rgba(0, 0, 0, 0.1),
      				-4px 4px 7px 0px rgba(0, 0, 0, 0.1);

	z-index: 300;
	-webkit-user-select: none;
  	-moz-user-select: none;  
  	-ms-user-select: none;
}
.force_left {
  left: 0px !important;
}
.calendar_grid_header{
	display: grid; 
	position: relative;
	grid-template-columns: var(--calendar-cell) 1fr var(--calendar-cell); 
}
.calendar_grid_header > div {
	vertical-align: middle;
    text-align: center;

    padding-top: 4px;
    padding-bottom: 5px;
}
.calendar_grid_body{
	display: grid; 
	grid-template-columns: repeat(7, var(--calendar-cell));
}
.calendar_grid_day{
    vertical-align: middle;
    text-align: center;

    padding-top: 4px;
    padding-bottom: 4px;

	white-space: nowrap;
	overflow-x: hidden;
}
/*.calendar_grid_body:last-child{
	border-bottom: none !important;
}
.calendar_grid_day:last-child{
	border-right: none !important;
}*/
.calendar_grid_body:last-child > .calendar_grid_day:last-child{
	border-radius: 0 0 var(--border-common-radius) 0;
}
.change_month{
	background-position: center;
	background-repeat: no-repeat;

	background-image: url('../pics/arrow_right.png'); 
	background-size: 9px 9px;

	cursor: pointer;
	user-select: none;
}
#prev_month_button{
	background-image: url('../pics/arrow_left.png') !important;
}
#change_year{
	outline: none !important; 
	border: none !important; 
	appearance: none; 
	-webkit-appearance: none; 
	-moz-appearance: none; 
	padding-right: 6px; 
	padding-left: 7px;
}
#change_year:hover{
	background-color: var(--hover-element);  
}
#change_year_options{
	display: none; 
	position: absolute; 
	right: -1px; /* -20px; */
	top: 26px;  /* 21px; */

	width: 123px; /*calc(var(--calendar-cell)*7); /* 123px; /* 78px */
	height: 134px; /*calc(24px*6 - 10px); */

	overflow-y: scroll;  
	background-color: var(--background-input); 
	text-align: center; 
	border: var(--border-common-thickness) solid var(--border-tab-color);
	border-top: none;
	border-radius: 0 0 var(--border-common-radius) var(--border-common-radius);
}
.year_option{
	padding: 2px;
}
.today_day{
	border: var(--border-common-thickness) solid var(--background-header); /* var(--border-tab-color); */
	border-radius: var(--border-common-radius);
}
.current_date{
	background-color: var(--hover-element);
	border-radius: var(--border-common-radius);
	border: var(--border-common-thickness) solid var(--border-option-active)
#99d1ff
;
}
.year_option:hover{
	background-color: var(--hover-element);  
}
.curr_days:hover{
	background-color: var(--hover-element);  
}
.change_month:hover{
	background-color: var(--hover-element);  
}
/*.picked_day{
	background-color: var(--hover-element);  
}*/
.day_names{
	background-color: var(--background-calender-names); 
	/*font-weight: 600;*/
}
.past_days, .futu_days{
	display: grid;
	align-items: center;
	color: var(--font-color-inactive_1);
	font-size: var(--font-size-small);
	font-style: italic;
}

		/* ========================= */
		/* ====      SELECT     ==== */
		/* ========================= */

.select_grid {
 	position:absolute; 

 	display: grid;
  	grid-template-columns: 1fr; 
  	grid-auto-rows: auto; 

  	transition: opacity 0.3s ease, visibility 0.3s ease;

  	top: 23px;
  	right: 0; /* left: 0; */

    overflow-x: hidden;
    overflow-y: auto; /* scroll; /* whel the class SCROLL_HIDDEN is added */

  	width: calc(100% - calc(var(--border-common-thickness) * 2));
  	max-width: calc(100% - calc(var(--border-common-thickness) * 2));
  	max-height: calc(23px * 10);

  	font: inherit;

    border: var(--border-common-thickness) solid var(--border-container-color);  /* --border-input-color */
    /*border-top: var(--border-common-thickness) solid transparent;*/
    border-radius: var(--border-common-radius);
    
    outline: 0 !important;   
	background-color: var(--background-input);
		box-shadow: 4px 4px 7px 0px rgba(0, 0, 0, 0.1),
      				-4px 4px 7px 0px rgba(0, 0, 0, 0.1);

	z-index: 300;
	-webkit-user-select: none;
  	-moz-user-select: none;  
  	-ms-user-select: none;
}
.select_option{
	display: grid;

	border-top: var(--border-common-thickness) solid transparent; 
	border-bottom: var(--border-common-thickness) solid transparent; 

	padding: 1px;
	overflow-x: hidden;
}
.select_option:first-child{
	border-top: var(--border-common-thickness) solid transparent !important; 
}
.select_option:last-child{
	border-bottom: var(--border-common-thickness) solid transparent !important; 
}
.select_option_active{
	background-color: var(--hover-element);
	border-top: var(--border-common-thickness) solid var(--border-option-active); 
	border-bottom: var(--border-common-thickness) solid var(--border-option-active); 
}
.select_option > div {
	overflow: hidden;
	padding-left: var(--padding-common-sides);
	padding-right: var(--padding-common-sides);
	padding-top: var(--padding-input-top); 
	padding-bottom: var(--padding-input-bottom); 

	white-space: nowrap;
	text-overflow: ellipsis;
}
.hide_option {
	display: none !important;
}
.vessel_option{
	grid-template-columns: 50% 1fr;
}
.select_option:hover{
	background-color: var(--hover-element);  
}
.option_tail, .option_add_new{
	color: grey;
	/*font-style: italic;*/
}
.name_part_hidden{
	display: none;
}

/* ==================================================== */
/* =================   OTHER CLASSES   ================ */
/* ==================================================== */

.content_row{
	display: none;
	overflow-y: hidden;
    margin-bottom: calc(-1*var(--gap-columns-common));
}
.content_window_active{
	display: grid;
}

.header_row{
	display: grid;
	grid-template-columns: auto 1fr;

	color: var(--font-color-header_2); 
	background-color: var(--background-header-aux);
	border: var(--border-common-thickness) solid var(--background-header); 
	border-radius: var(--border-common-radius) var(--border-common-radius) 0 0;

	padding-top: var(--padding-common);
	padding-bottom: var(--padding-common);
	padding-left: var(--padding-header-sides);
	padding-right: var(--padding-header-sides);

	user-select: none;
}
.container_row{
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto; 	

	background-color: var(--background-main);
	border: var(--border-common-thickness) solid var(--border-container-color);  /* var(--background-header); */
	border-top: none;
	border-radius: 0 0 var(--border-common-radius) var(--border-common-radius);

	padding-top: var(--padding-header-sides);
	padding-bottom: var(--padding-common-sides);
	padding-left: var(--padding-header-sides);
	padding-right: var(--padding-header-sides);

	margin-bottom: calc(var(--gap-columns-common) + 1px);
}
.grand_parent{		/* ===================== IS IT STILL NECESSARY ====================== */
	padding-top: var(--gap-columns-common);
}

.new_item_window{
    display: grid; 
    min-width: 300px;
    max-width: 400px; 
    align-content: center;

    padding: 10px;
    margin-bottom: 30px;
    background-color: var(--background-main);
    border-radius: var(--border-common-radius);
    border: var(--border-common-thickness) solid var(--border-tab-color);
}
.new_item_window_wrapper{
	display: none; 
	position: fixed; 
	width: 100%; 
	height: 100%; 
	background-color: rgba(0, 0, 0, 0.5); 
	z-index: 900; 
	align-content: center;
    justify-content: center;
}
.show_new_item_wrapper{
	display: grid;
}

.searchbar_style{
	background-color: var(--background-main);	  
	padding: var(--padding-common);	  
	padding-left: 0px;
	/*border-bottom: var(--border-common-thickness) solid var(--border-tab-color);*/
	/*margin-bottom: var(--gap-columns-common);	*/
}
.searchbar_1_half { 
	display: flex; 
	flex-wrap: nowrap; 
	margin-right: auto;
}
.searchbar_2_half { 
	display: flex; 
	flex-wrap: nowrap;
}
.searchbar_hidden{ 
	display: none;
}
.search_bars{
	display: none;
	width: 100%;
}
.search_bars_active{
	display: flex; /* particularly for Search Bars, to fold into two halves */ 
}
.menu_line_aux_active{
	display: flex !important;
}
.searchbar_button{
	margin-left: 8px; 
	margin-right: 4px; 
	margin-top: auto; 
	margin-bottom: 10px !important; 

	user-select: none; 
	padding-top: var(--padding-common-sides);
    padding-bottom: var(--padding-common-sides);"
}
.search_field{
    padding-left: var(--padding-header-sides);
    padding-right: var(--padding-header-sides);
    padding-top: 2px;
    padding-bottom: var(--padding-header-sides);
    
    border-image: var(--border-gradient_3);
    border-width: var(--border-common-thickness);
    border-style: solid;
    border-left: none;
    border-top: none;
    border-bottom: none;
}
.text_centered{
	text-align: center;
}
.text_to_right{
	justify-content: right;
	padding-right: 0px;
}
.text_to_left{
	justify-content: left;
}

.aux_header{
	border-bottom: var(--border-common-thickness) solid var(--border-tab-color); 
}
.aux_header > label{
	padding-top: 5px;
	padding-bottom: 6px;
	padding-right: 6px;
	padding-left: 6px;

	margin-bottom: 0px;

	border-image: var(--border-gradient_4);	  
	border-width: var(--border-common-thickness);
	border-style: solid; 
    border-left: none;
    border-top: none;
    border-bottom: 1px solid white;

	overflow-x: hidden;
}	
.aux_header > label:last-child{border:none;}
/*.aux_header > label:hover{ 
	background-color: var(--hover-element);
 }*/

.margin_off_row > input{
	margin-right: 0px; margin-left: 0px; margin-bottom: 0px;
	border-radius: 0px; 
	border-right: var(--border-common-thickness) solid var(--background-input);
	border-left: none;	
	border-top: none;
	border-bottom: var(--border-common-thickness) solid var(--border-input-color);
}
.margin_off_row:hover > input{
	background-color: var(--hover-element);  
}
.margin_off_row:hover > .custom_input_wrapper > input{
	background-color: var(--hover-element);
}

.margin_off_row > .custom_input_wrapper > input{
	margin-right: 0px; margin-left: 0px; margin-bottom: 0px;
	border-radius: 0px; 
	/*border-right: var(--border-common-thickness) solid var(--background-input);*/
	border-left: none;	
	border-top: none;
	border-bottom: var(--border-common-thickness) solid var(--border-input-color);
}
.margin_off_row.topline > .custom_input_wrapper > input{
	border-top: var(--border-common-thickness) solid var(--border-input-color);
	border-radius: 0px 0px 0px 0px; 
}
.margin_off_row.topline > .custom_input_wrapper > .custom_input_tail{
	border-top: var(--border-common-thickness) solid var(--border-input-color);
	border-radius: 0px 0px 0px 0px; 
}
.margin_off_row > .custom_input_wrapper > .custom_input_tail{
	margin-right: 0px; margin-left: 0px; margin-bottom: 0px;
	border-radius: 0px; 
	/*border-right: var(--border-common-thickness) solid var(--background-input);*/
	/*border-left: none; */
	border-top: none;
	/*border-bottom: var(--border-common-thickness) solid var(--border-input-color);*/
}
.margin_off_row > .custom_input_tail{
	margin-right: 0px; margin-left: 0px; margin-bottom: 0px;
	border-radius: 0px; 
	/*border-right: var(--border-common-thickness) solid var(--background-input);*/
	border-left: none;	
	border-top: none;
	border-bottom: var(--border-common-thickness) solid var(--border-input-color);
}
.margin_off_row > .radio_tail{
	margin-right: 0px; margin-left: 0px; margin-bottom: 0px;
	border-radius: 0px; 
	/*border-right: var(--border-common-thickness) solid var(--background-input);*/
	border-left: none;	
	border-top: none;
	border-bottom: var(--border-common-thickness) solid var(--border-input-color);
}

.margin_off_column{
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
}
.margin_off_column > input{
	margin-right: 0px; margin-left: 0px; margin-bottom: 0px;
	border-radius: 0px; 
	border: var(--border-common-thickness) solid var(--border-input-color);
	border-top: none;
}
.margin_off_column:first-child > input{
	border-top: var(--border-common-thickness) solid var(--border-input-color);
	border-radius: var(--border-common-radius) var(--border-common-radius) 0px 0px; 
}
.margin_off_column:last-child > input{
	border-radius: 0px 0px var(--border-common-radius) var(--border-common-radius); 
}
.margin_off_column:hover > input{
	background-color: #e5f3ff;
}
.margin_off_column > .custom_input_wrapper > input{
	margin-right: 0px; margin-left: 0px; margin-bottom: 0px;
	border-radius: 0 0 0 var(--border-common-radius); 
	border-top: none;
	border-bottom: var(--border-common-thickness) solid var(--border-input-color);
}
.margin_off_column > .custom_input_wrapper.topline > input{
	border-top: var(--border-common-thickness) solid var(--border-input-color);
	border-radius: 0px 0px 0px 0px; 
}
.margin_off_column > .custom_input_wrapper > .custom_input_tail{
	margin-right: 0px; margin-left: 0px; margin-bottom: 0px;
	border-radius: 0px; 
	border-top: none;
}
.margin_off_column > .custom_input_wrapper.topline > .custom_input_tail{
	border-top: var(--border-common-thickness) solid var(--border-input-color);
	border-radius: 0px 0px 0px 0px; 
}
.margin_off_column > .minus_tail{
	margin-right: 0px; margin-left: 0px; margin-bottom: 0px;
	border-radius: 0px; 
	border-top: none;
}
.margin_off_column > .minus_tail.topline{
	border-top: var(--border-common-thickness) solid var(--border-input-color);
	border-radius: var(--border-common-radius) 0px 0px 0px; 
}

.position_list{
	display: grid;
	grid-template-rows: auto 1fr;
}
.pers_photo{
    width: 90px; 
    height: 120px; 

    margin-left: -4px; /* to compensate a grid gap */

    border: var(--border-common-thickness) solid var(--border-input-color);
    border-radius: var(--border-common-radius);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}
.pers_photo_default_image{
	background-image: url('../pics/subface.png');
}

/* ==================================================== */
/* ===============    ORDERS TABLE     ================ */
/* ==================================================== */


.orders_table_row{
	display: grid;
	grid-template-columns: minmax(62px, auto) 1fr 70px;
	column-gap: var(--gap-columns-common);
	
	padding-top: var(--padding-common);
	padding-bottom: var(--padding-common);
	padding-left: var(--padding-header-sides);
	padding-right: var(--padding-header-sides);

	border-top: var(--border-common-thickness) solid transparent; 
	border-bottom: var(--border-common-thickness) solid transparent; 
	outline: 0 !important;
}
.orders_table_row:first-child{
	border-top: var(--border-common-thickness) solid transparent !important; 
}
.orders_table_row:last-child{
	border-bottom: var(--border-common-thickness) solid transparent !important; 
}
.orders_table_row:hover{
	background-color: var(--hover-element);
	cursor: default;
}
.orders_row_active{
	background-color: var(--hover-element);
	border-top: var(--border-common-thickness) solid var(--border-option-active); 
	border-bottom: var(--border-common-thickness) solid var(--border-option-active); 
	outline: 0 !important;
}

.orders_table_middle_column{
	overflow-x: hidden;
}
.orders_table_middle_column_item{
	text-wrap: nowrap;
}
.orders_table_middle_column_item.splitted{
	display: grid;
	grid-template-columns: 1fr minmax(120px, 30%);
	column-gap: var(--gap-columns-common);	
}
.orders_table_first_column_qfc{
	font-weight: 700;
}

.startform_wrapper{
    justify-content: center; 
    align-items: center; 
    align-content: center;
}

.add_new_sign{
	display: grid;
	align-items: center;
	text-align: center;

	position: absolute;
    bottom: var(--padding-common-sides);
    right: var(--padding-common-sides);
    border-radius: 10%;
    height: 50px;
    width: 50px;
    background-color: var(--background-header-aux);
    opacity: 0.1;
    user-select: none;
}
.add_new_sign:hover{
	opacity: 1;
	color: white;
	cursor: pointer;
}

/* ==================================================== */
/* =============    PERSONNEL TABLE     =============== */
/* ==================================================== */

.personnel_table_row{
	display: grid;
	grid-template-columns: minmax(62px, auto) 1fr 70px;
	column-gap: var(--gap-columns-common);
	
	padding-top: var(--padding-common);
	padding-bottom: var(--padding-common);
	padding-left: var(--padding-header-sides);
	padding-right: var(--padding-header-sides);

	border-top: var(--border-common-thickness) solid transparent; 
	border-bottom: var(--border-common-thickness) solid transparent; 
	outline: 0 !important;
}
.personnel_table_row:first-child{
	border-top: var(--border-common-thickness) solid transparent !important; 
}
.personnel_table_row:last-child{
	border-bottom: var(--border-common-thickness) solid transparent !important; 
}
.personnel_table_row:hover{
	background-color: var(--hover-element);
	cursor: default;
}
.personnel_row_active{
	background-color: var(--hover-element);
	border-top: var(--border-common-thickness) solid var(--border-option-active); 
	border-bottom: var(--border-common-thickness) solid var(--border-option-active); 
	outline: 0 !important;
}


/* ==================================================== */
/* =============    MINOR AUX CLASSES    ============== */
/* ==================================================== */

.flex_content_end{
	justify-content: flex-end;
}
.color_inherited{
	color: inherit;
}
.col_stand_1{
	margin-left: -8px;
}
.col_stand_3{
	min-width: 150px;
}
.empty_row_19{
	height: 19px;
}
.status_label{
	margin-left: auto;
}

#index_body{
	grid-template-rows: auto 1fr auto !important;
}
.text_align_right{
	text-align: right;
}
.base_country{
	margin-left: calc(-1 * var(--gap-columns-common));
}

/* ==================================================== */
/* =================    GRID SIZES    ================= */
/* ==================================================== */

.size-fr-auto {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--gap-columns-common);	
}
.size-auto-fr {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--gap-columns-common);	
}
.size-auto-auto {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: var(--gap-columns-common);	
}
.size-50-50 {
	display: grid;
	grid-template-columns: 50% 1fr;
	column-gap: var(--padding-common-half); 
}
.size-toggle {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: var(--gap-columns-common);	
	justify-content: start;
	/*align-items: center;*/
}
.size-1-fr {
	display: grid;
	grid-template-columns: 42px 1fr;
	column-gap: var(--gap-columns-common);	
}
.size-2-fr {
	display: grid;
	grid-template-columns: 62px 1fr;
	column-gap: var(--gap-columns-common);	
}
.size-3-fr {
	display: grid;
	grid-template-columns: 80px 1fr;
	column-gap: var(--gap-columns-common);	
}
.size-4-fr {
	display: grid;
	grid-template-columns: 100px 1fr;
	column-gap: var(--gap-columns-common);	
}
.size-3-fr-photo {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	column-gap: var(--gap-columns-common);	
	margin-bottom: var(--margin-input-bottom);
}
.size-3-auto-fr {
	display: grid;
	grid-template-columns: 80px auto 1fr;
	column-gap: var(--gap-columns-common);	
}
.size-3-date {
	display: grid;
	grid-template-columns: 80px var(--size-alt-date);
	column-gap: var(--gap-columns-common);	
}

/* a bit special.... for one time use */
.size-3-auto-auto-auto-fr{
	display: grid;
	grid-template-columns: 80px auto auto auto 1fr;
	column-gap: var(--gap-columns-common);	
}
.size-3-auto-auto-auto-fr-auto{
	display: grid;
	grid-template-columns: 80px auto auto auto 1fr auto;
	column-gap: var(--gap-columns-common);	
}
.size-3-auto-auto-fr{
	display: grid;
	grid-template-columns: 80px auto auto 1fr;
	column-gap: var(--gap-columns-common);	
}
.size-3-1fr-auto-3{
	display: grid;
	grid-template-columns: 80px 1fr auto 85px;
	column-gap: var(--gap-columns-common);	
}


.size-uma-ref{
	width: var(--size-uma-ref);	
}
.size-manager{
	width: 120px;
}
.size-status{
	width: var(--size-status);	
}
.size-small-label{
	min-width: 0px;	
}


.size-personnel-involved_main{
	display: grid;
	grid-template-columns: 
		var(--input-tail-outer-width)
		/*var(--input-tail-outer-width)
		var(--input-tail-outer-width)*/
		150px 
		1fr 
		/*var(--size-alt-wage)
		var(--size-alt-currency)
		var(--size-alt-wage-type) */
		calc(var(--size-alt-date) + var(--input-tail-width) + var(--padding-common-sides))
		calc(var(--size-alt-date) + var(--input-tail-width) + var(--padding-common-sides));

}
.size-personnel-involved_main_freerow{
	display: grid;
	grid-template-columns: var(--size-alt-number-field) 1fr;
	margin-bottom: 3px; /* to compensate container_row padding */
}

.size-passports_main{
	display: grid;
	grid-template-columns: 
		var(--input-tail-outer-width)
		150px 
		1fr 
		calc(var(--size-alt-date) + var(--input-tail-width) + var(--padding-common-sides))
		calc(var(--size-alt-date) + var(--input-tail-width) + var(--padding-common-sides))
		var(--input-tail-outer-width);
}

/* ==================================================== */
/* ================    STATUS COLOURS    ============== */
/* ==================================================== */
.status_basic{
	min-height: 16px;
	border-radius: 2px;
	padding-left: var(--padding-common);
	padding-right: var(--padding-common);
}
.status_considered{
	background-color: mediumpurple;	
	color: white;
}
.status_confirmed{
	background-color: lightgreen;	
}
.status_inprogress{
	background-color: yellow;
}
.status_finished{
	font-weight: 600;
}
.status_cancelled{
	color: red;
}

/* ==================================================== */
/* ==================== QUOTATION ===================== */
/* ==================================================== */

#quotation_list{
	padding-top: 0px;
}

.quotation_header{
	display: grid;
	position: sticky; /* to be on safe side and avoid scrolling */
	top: 0px; 
	z-index: 9;
}
.quotation_tab_line{
	display: grid;
	grid-template-columns: auto 1fr auto auto;
}
.quotation_page{
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	/*grid-template-columns: 1fr;
	grid-auto-rows: auto; */

	position: relative;
	min-height: 0px; /* supposed to be important, for not expending beyon the parent's borders... */

	border-left: var(--border-common-thickness) solid var(--border-container-color);
	border-right: var(--border-common-thickness) solid var(--border-container-color);

	padding-top: var(--padding-header-sides);
	padding-bottom: var(--padding-common-sides);
	padding-left: calc(var(--padding-header-sides) - 0px); /*var(--padding-common-sides);*/
	padding-right: var(--padding-header-sides);
	background-color: var(--background-main);
}
.quotation_tab_page{
	position: relative;
	overflow-y: auto;  /* scroll; */

	/*background-color: white;*/
	
	/*border-radius: 0px 0px var(--border-common-radius) var(--border-common-radius);
	border: var(--border-common-thickness) solid var(--border-input-color); /*var(--border-container-color)*/
	/*border-top: none; */

	padding: var(--padding-common-sides);
	/*padding-top: var(--padding-common-sides);*/
}

.size-list-of-quotations{
	display: grid;
	grid-template-columns: 
		var(--size-alt-number-field) 
		100px 
		1fr 
		calc(var(--size-status) + var(--input-tail-width) + var(--padding-common-sides));
}

.quotation_scope{
	display: none;
	max-height: 85px !important;
	min-height: 66px;
	height: 66px;
}

.row_0{
	display: grid;
    grid-auto-flow: column;
    grid-template-columns: 31px 150px 1fr;
}
.row_1{
	display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr auto 70px 90px;
}
.scope_row{
	display: grid;
	grid-template-columns: 21px 1fr;
}
.rank_row{
	display: grid;
    grid-template-columns: 21px 50px 150px 1fr;
}
.rank_row_blank{
	display: grid;
    grid-template-columns: 221px 1fr;
}
.minus_tail{
	background-image: url(../pics/minus2.png);
    background-size: 9px 9px;
    border-left-color: var(--border-input-color);
    border-radius: var(--border-common-radius) 0 0 var(--border-common-radius);
    border-right: none;
}

/* ==================================================== */
/* ============== SMALL TOOLTIP / POPOVER ============= */
/* ==================================================== */

/*.custom_input_wrapper::after{

	content: "press enter or double-click to edit";

    position: absolute;
    top: -6px;
    left: 0;

    display: none;

    padding: 8px;
    min-width: 150px;

    background: #fdfd8b;
    border: 1px solid #999;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);

    z-index: 1000;
}	
.custom_input_wrapper.show_tooltip::after{
	display: block;
}
*/

/* ==================================================== */
/* ==================== SCANNED DOCS ================== */
/* ==================================================== */

.scanned_doc{
	width: 50px; 
	height: 50px;
}

#scanned_docs{
	grid-template-columns: auto auto auto auto auto auto auto auto;
}






/* ==================================================== */
/* ==================================================== */
/*  THE VERY END  */