@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root {
	/* Background */
    /* --body-bg: #fff; */
    /* --gray-bg-1: rgb(248,248,248); */
    /* Border */
    /* --gray-border-1: #d7d7d7; */
    /* Text */
    /* --wise-input-text-color: rgb(83, 66, 193); */
	/* Link */
	--link-color: #4b8810;
	--link-font-family: "Quicksand", sans-serif;
	/* Logo */
	--site-logo-width: 300px;
	--site-logo-mobile-width: 70%;
	/* Header */
	--header-color: #5BA611;
	/* Footer */
	--footer-background-color: #5BA611;
	--footer-color: white;
	/* Modal */
	--modal-header-title-color: white;
    /* Button */
    --button-bg: #5BA611;
	--button-primary-color: #5ba611;
    --button-primary-border-color: #5ba611;
    --button-primary-text-color: #fff;
    --button-secondary-color: #f8f9fa;
    --button-secondary-border-color: black;
    --button-secondary-text-color: black;
    --button-outline-border-color: #5ba611;
    --button-outline-text-color: #5ba611;
    --button-outline-hover-text-color: #fff;
    --button-danger-color: #bd3529;
    --button-danger-border-color: #bd3529;
    --button-danger-text-color: #fff;
	--button-icon-danger-color: #450e09;
    /* --button-bg-hover: hsla(0,0%,100%,.2); */
    /* --button-accent-color: rgb(168, 158, 222); */
    /* General */
    --wise-default-color: #5BA611;
    /* Multiselect */
    --multiselect-background-color: #5BA611;
    --multiselect-color: white;
    /* == waste-select-product == */
    /* Quantity controls */
    --quantity-control-selected-color: #5BA611;
    /* == EventDetails view == */
    /* InstructionSteps */
	--instruction-step-title-color: #5BA611;
    --instruction-step-title-font-size: 20px;
	
	/* == UserActions view == */
    --button-text-size: 27px;
    --form-label-size: 16px;
    --form-text-size: 16px;
    --events-label-size: 16px;
    --events-text-size: 22px;
	
    /* Gradient */
    /* --gradient-1: #5BA611; */
    /* --gradient-2: #5BA611; */
    /* --gradient: linear-gradient( 140deg, var(--gradient-1) 10%, var(--gradient-2) ); */
    --header-pic-url: url("/Images/header-logo-white.png");
    --hilight-filter: invert(64%) sepia(54%) saturate(2531%) hue-rotate(341deg) brightness(102%) contrast(96%);
    --background-color: white;
    --text-color: black;
    --hilight-color: #5BA611;
    --hilight-darker-color: #42780c;
    --darker-background: #f5f6fa;
    --input-background-color: white;
    --input-background-focus-color: #0768A9;
    --input-border: lightgray 2px solid;
    --input-border-radius: 8px;
    --input-text-focus-color: white;
    --input-text-placeholder-color: #0768A944;
    --input-text-disabled-color: #0768A9aa;
    --gray-border-1: #d7d7d7;
    --input-background-disabled-color: white;
    --table-background-color: white;
    --table-text-color: black;
    --table-background-hover-color: #C3003C;
    --table-text-hover-color: white;
    --button-delete-color: #7719AA;
    --button-delete-icon: #9652AB;
    --button-delete-text-color: white;
    --required-color: #C3003C;
    --tooltip-background-color: white;
    --tooltip-text-color: #C3003C;
    --modal-text-color: black;
    --button-radio-selected-color: #009f4d;
    --news-background-color: #FCF3B0;
    --news-text-color: grey;
    --text-danger-color: red;
    --alertify-success-background-color: rgba(91,189,114,.95);
    --alertify-success-text-color: white;
    --header-font: "Quicksand", sans-serif;
    --site-font: "Quicksand", sans-serif;
    --modal-font: "Quicksand", sans-serif;
}

@font-face {
    font-family: 'Roboto-Thin';
    font-style: normal;  
	font-weight: 300;
    src: local('Roboto Thin'), local('Roboto-Regular'), 
    url('../fonts/Roboto/Roboto-Thin.ttf') format('truetype'); 
} 

@font-face {
    font-family: 'Roboto';
    font-style: normal;  
	font-weight: 300;
	
    src: local('Roboto'), local('Roboto-Regular'), 
    url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype'); 
}

html {
}

body {
    background: #fff;
	background-color:var(--background-color);
	
    color: var(--text-color);
}
#customer-logo {
    background: url('images/logo.png');
}
.site-logo {
	max-height:120px;
}
a {
    text-decoration: none;
    font-weight: bold !important;
}
    a:hover {
        text-decoration: none;
    }

.nav-block {
    margin: 30px;
    margin-top: 10px;
    display: inline-block;
    vertical-align: top;
}

#userActions, #cultureSelection {
    font-size: 16px;
    padding: 5px 10px;
    border: 1px solid lightgrey;

    border: var(--input-border);
    border-radius: var(--input-border-radius);
}
.main-header {
    margin: 10px;
    padding: 15px;
}


input, select{
	color:var(--input-text-color)!important;
	
}

.form-floating label:after {
	background-color: transparent !important;
}
.rb {
	border: 1px dashed red  !important;
}
.event-list-search input,
.event-list-search select {
	height: 58px !important;
	margin-top:0px !important;
}
.view-button {
	padding:5px;
}
.login-button {
	margin-top:8px !important;
	margin-bottom:18px !important;
}
#extranet-app .card-body {
	color: var(--text-color);
}
#leftArrow {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    float: left;
    height: 20px;
    padding: 4px;
    border: 3px solid transparent;
    border-radius: 50%;
}

#top-bar {
    right: 10px;
}


    #top-bar > .nav-block {
        margin: 10px;
    }

        #top-bar > .nav-block > a {
            font-size: 18px;
        }

#leftArrow:hover {
    padding: 2px;
    cursor: pointer;
    height: 20px;
    padding: 4px;
    border: 3px solid white;
    border-radius: 50%;
}

#leftArrow:active {
    padding: 2px;
    cursor: pointer;
    height: 20px;
    padding: 4px;
    border: 3px solid lightseagreen;
    border-radius: 50%;
}


body {
    padding-top: 0px;
    margin: 0px;
}

#contract-wrapper, #customer-card,#customer-estate {
    font-size: 14px !important;
}
h1, h3 {
    color: var(--hilight-color) !important;
}
button.help-icon {
    background: var(--hilight-color) !important;
}

#extranet-app .btn.btn-primary,
#login-app .btn.btn-primary
¨ {
    background-color: transparent !important;
    border: 3px solid var(--hilight-color) !important;
    color: var(--hilight-color) !important;
}

.extlinkicon {
    height: 23px;
    margin-bottom: 3px;
    margin-left: 3px;
}

#userActions, #cultureSelection {
    font-size: 16px;
    padding: 5px 10px;
    border: 1px solid lightgrey;

    border: var(--input-border);
    border-radius: var(--input-border-radius);
}

.lang-selector {
    float: right;
    width: 100%;
}

.user-actions {
    float: right;
    text-align: right;
    line-height: 18px;
    vertical-align: top;
}
    .styleCircle {
        position: fixed;
        width: 20px;
        height: 20px;
        bottom:10px;
        left:10px;
        background: var(--hilight-color);
     
        border-radius: 10px;
        display:none;
    }

    .user-actions {
        margin-top:5px;
		line-height:1.2;
        float: left;
		text-align: left;
    }
	
	#col-top-bar
	{
		order:1;
	}

	#col-header-pic
	{
		order:2;
	}
}
.input-wrapper label:after
{
	background-color:transparent !important;
}

.card-icon, .extlinkicon.cyan, .wm-icon.cyan{
    filter: invert(68%) sepia(27%) saturate(671%) hue-rotate(137deg) brightness(102%) contrast(83%) !important;
    filter: var(--hilight-filter) !important;
}

.button-clear {
    background: transparent;
    border: none;
    outline: none;
    color: blue;
}