@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/*************************************************
        				OVERRIDE STYLESHEET
	 	 			This is the stylesheet for customer
      		specific changes, like color, logo,
										and fonts.
			It's also possible to add more changes if
										necessary.
*************************************************/

/*************************************************
        							GENERAL
	 	 General settings for all elements and
 		 			region-specific adjustments.
*************************************************/


:root {
	--blue500: #003057; /* Tullverket primary. Används i sidhuvudet som bakgrund till Tullverkets logotyp och i vänsterjusterade sidomenyn. Detta är även en komplementfärg i grafiska profilen för tryckt material. */
	--blue700: #002d47; /* Används som sekundär färg i sidhuvudet som bakgrund till inloggningsmenyn. Detta är även bakgrundsfärg till fasadskylt till klareringsexpeditioner och tullfilter */
	--blue400: #003f85; /* Används till knappar, blå text mot ljus bakgrund (länkar mm), meny under sidhuvud */
	--blue300: #0057B8; /* Hoverfärg på knappar */
	--black: #000000;
	--grey700: #0d0d0d; /* Används till text mot ljus bakgrund. Vid de specifika fall då den inte uppfyller WCAG 2.1 AAA används istället #000000 */
	--grey800: #3b3b3b; /* Sekundär text bland annat i inaktiva knappar */
	--grey600: #757575; /* Används till formulärfältens konturer, samt som fältrubriker (eng: field labels) */
	--grey400: #c7c7c7; /* Används till inaktiv knappar */
	--grey200: #f5f5f6; /* Bakgrundsfärg */
	--grey100: #f8f8f8; /* Används till text på mörk bakgrund. Vid de specifika fall då den inte uppfyller WCAG 2.1 AAA används istället #FFFFFF */
	--white: #ffffff;
	
	--red500: #B10021; /* Tullverket warn - Tullverket red 500 - Varning */
	--yellow500: #f9d616; /* Tullverket accent - Tullverket yellow 500 - Information */
	--green600: 006326; /* Tullverket green 600 - Ok */
}

/*************************************************
            Styles for ordering content
*************************************************/

.flex-layout-row {
    padding: 0 !important;
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.flex-justify-flex-end {
    justify-content: flex-end;
}

.flex-no-wrap {
    flex-wrap: nowrap;
}

.flex-item-row {
    padding: 0 !important;
    margin: 0 16px 16px 0 !important;
}

.flex-layout-column {
    padding: 0 !important;
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
}

/*************************************************
            Styles for special fields
*************************************************/

.landskod {
    padding: 0 !important;
    width: 5rem;
}

.telefonnummer {
    padding: 0  !important;
    width: 100%;
}

/*************************************************
           	 	  	 	  HEADER
*************************************************/

/* Sets size and color to active user icon */
.active-user:before {
    color: #003057;
    /* Icon color - changeable */
}

/* Sets logo height */
#logo {
    max-height: 70px;
    padding-right: 15px;
    content: url("ImageDB?imageName='tullverket_logo.png'") !important;
}

.title {
    color: white;
}

/*************************************************
           	 	     POP OUT MENUS
*************************************************/

/* Sets size, position and transition to the menu button */
.menu-btn {
    color: var(--blue500);
    /* Icon color - changeable */
}

#account-btn:before {
    color: #003057;
    /* Icon color - changeable */
}

#logout-btn:before {
    color: #003057;
    /* Icon color - changeable */
}

/*************************************************
           	 	     NAVIGATION
/*************************************************/

/* Sets hover on nav-btn */
.nav-btn:not(.current-btn):hover {
    border-bottom: solid 3px #003057;
    /* Main color - changeable */
}

/* Settings for the current navigation button */
.current-btn {
    border-bottom: solid 2px #EAEAE8;
}

/* Sets the icon of the navigation button */
#cases-btn:before {
    color: #003057;
    /* Icon color - changeable */
}

/* Sets the icon of the navigation button */
#new-btn:before {
    color: #003057;
    /* Icon color - changeable */
}

/*************************************************
         			  			CASES
*************************************************/

/* ACCORDION SPECIFIC */

/* Sets the style of the decision doc icon */
.decision-listing .icon-btn {
    color: #003057;
    /* Icon color - changeable */
}

/* CASE SPECIFIC */

/* Sets the style of the close button */
.btn-close {
    background-image: url(ImageDB?imageName=%22SF_arrow-left-blue.png%22);
}

.btn-close:hover {
    border: 2px solid #0B8FBC;
}

/*************************************************
				ICONS
*************************************************/

.material-icons {
	font-family: 'Material Icons' !important;
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
    vertical-align: middle;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
  
	color: var(--blue400); /* Icon color - changeable */
	margin: auto;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;
  
	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;
  
	/* Support for IE. */
	font-feature-settings: 'liga';
}

/* Open helptext button hover */
button:hover .material-icons {
	color: var(--blue300);
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

button:focus .material-icons {
	color: var(--blue400);
	border-radius: 25px !important;
    border: 2px solid var(--blue400);
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

/* Sets style for icon-button */
.icon-btn {
	position: relative;
    padding: 8px;
    min-width: 44px;
    height: 44px;
	color: var(--blue400); /* changeable */
    background-color: transparent !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
/*    font-size: 24px; */
    outline: none;
}

.icon-btn:hover {
	text-decoration: underline;
	border: 1px solid var(--blue400);
}

.icon-btn:focus {
	text-decoration: underline;
	border: 2px solid var(--blue400);
}

.icon-last {
    margin-right: 8px;
}

.delete::before {
	content: "delete";
}

.add::before {
    content: "add";
}
.email::before {
    content: "email";
}

/*************************************************
               HELPTEXT
*************************************************/

/* Open helptext button */
.help-btn {
	position: relative;
    width: 44px;
    height: 44px;
	color: transparent;
    background-color: transparent !important;
    border: none;
    cursor: pointer;
/*    font-size: 24px; */
    outline: none;
}

.help-input-label {
	font-size: 12px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    color: var(--blue500) !important;
    font-weight: 400 !important;
	display: inline-block;
}

.help-input-text {
	display: none;
}

.overlay-text {
	display: none;
}

#overlay {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	display: none;
}
  
#popup {
	max-width: 80vw;
	width: 320px;
	height: 100vh;
	position: absolute;
	top: 0;
	right: 0;
    padding: 24px;
	background: #fff;
    overflow-y: auto;
}
  
#close {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	color: #000;
}

/*************************************************
        							 Buttons
*************************************************/

/* make the button right aligned */
.right-aligned-btn{
    margin-right: revert;
}

/* Sets the style of the case button */
.case-btn {
    background-image: url(ImageDB?imageName=%22SF_arrow-right-blue.png%22);
}

/* Sets the style of the case button hover */
.case-btn:hover {
    border: 2px solid #0b8fbc;
}

/* Sets the style of the accordion */
/* .accordion-btn {
    background-image: url(ImageDB?imageName=%22SF_arrow-down-blue.png%22);
} */

/* Sets the style of the accordion when active:after */
/* .accordion-btn.active {
    background-image: url(ImageDB?imageName=%22SF_arrow-up-blue.png%22);
} */

/* Sets the style of the accordion hover */
/* .accordion-btn:hover {
    background-image: url(ImageDB?imageName=%22SF_arrow-down-blue.png%22) !important;
} */

/* Sets the style of the accordion active hover */
/* .accordion-btn.active:hover {
    background-image: url(ImageDB?imageName=%22SF_arrow-up-grey.png%22) !important;
} */

/* Sets the style of the confirm button */
.confirm-btn {
    background-color: #006326;
    /* Confirm button color - changeable */
    border-color: #006326;
    /* Confirm button hover color - changeable */
    color: white;
    background-image: url(ImageDB?imageName=%22SF_arrow-white-right.png%22);

}

.confirm-btn:hover {
    background-color: #009639;
    /* Confirm button hover color - changeable */
}

/* Sets the style of the open button */
.open-btn {
    background-color: #0067a5;
    /* Open button color - changeable */
    border-color: #0067a5;
    /* Open button hover color - changeable */
    color: white;
}

/* Sets the style of the open button hover */
.open-btn:hover {
    background-color: #1b5995;
    /* Open button hover color - changeable */
}

.open-btn:focus {
    outline: 3px solid #ffbf47;
}

/* Sets the style of the delete button */
.delete-btn {
    background-color: #B10021;
    /* Delete button color - changeable */
    border-color: #B10021;
    /* Delete button hover color - changeable */
    color: white;
}

/* Sets the style of the delete button hover */
.delete-btn:hover {
    background-color: #E4002B;
    /* Delete button hover color - changeable */
}

/* Sets the style of the cancel button */
.cancel-btn {
    background-color: #C7C7C7;
    /* Cancel button color - changeable */
    border-color: #C7C7C7;
    /* Cancel button hover color - changeable */
    color: #000000;
}

/* Sets the style of the cancel button hover */
.cancel-btn:hover {
    background-color: #F5F5F6;
    /* Cancel button hover color - changeable */
}

/* Sets style on "see all messages", "see all closed cases" and "see all open cases"*/
.btn-link {
    color: #005bbf;
}

.btn-link:hover {
    border: 2px solid #eea236;
}

.btn-link:focus {
    color: #0067a5;
    outline: 3px solid #ffbf47;
    text-decoration: underline;
}




/*************************************************
                    FOOTER
*************************************************/

/* Sets color and spacing for the footer */
#footer {
    background-color: #003057;
    /* Main color - changeable */
}

/*************************************************
       		   	  Standard FORM
 				 These settings are mainly for the
 					       standard form.
*************************************************/

/* Changes the style of the page numbering in the nav menu */
.page-nr {
    color: #003057;
}

/************* Digiforms override error message ***************/
.digiforms_validation_message {
    color: var(--red500);
    background-color: transparent;
}

/* Sets styling to the activated indicator */
.accordion-case .activated {
    color: white;
    background: #339966;
}

/* Sets styling to the deactivated indicator */
.accordion-case .deactivated {
    color: white;
    background: #E91218;
}

/* Sets the style of the open button hover */
.open-btn:hover {
    border-color: #003057;
    color: white;
}

/* Sets the style of the delete button hover */
.delete-btn:hover {
    border-color: #E91218;
    color: white;
}

/* Sets background color to the service info in the accordions */
.service-info .grid1,
.service-info .grid2 {
    background-color: #EAEAE8;
}

/* Styling the attachment button */
.attachment label:not(.btn) {
    color: white !important;
    background-color: var(--blue400)!important;
    
}

/* Styling the attachment button hover */
.attachment label:hover:not(.btn) {
    background-color: var(--blue300)!important;
    
}

/* Styling the attachment button when active */
.attachment label:active:not(.btn) {
    background-color: var(--blue400) !important;
   
}

/* Styling the attachment remove button */
.remove-attachment {
    color: var(--grey100);
    background-color: #E91218;
    border: 1px solid #9C0000;
}

/* Styling the attachment remove button on hover */
.remove-attachment:hover {
    background-color: #9C0000;
    border: 1px solid #E91218;
}

/* Styling the uploaded attachment */
[id^="uploaded"] {
    background-color: #f2f2f2 !important;
}

/* Accordion button style Xiaotong added */
.accordion-container {
    background-color: white;
    overflow: hidden;
    /* display: none; */
    border-radius:4px;
    width: 100%;
    color: #3b3b3b;
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.accordion-button{
    width:100%;
    border-width:0;
    text-align:left;
    display: flex;
    justify-content: space-between;
    background: white;
    cursor: pointer;
    font-size:1.125rem;
    padding: 12px 24px;
    font-weight: 500;
}
.accordion-button:hover {
    background: #f5f5f6 !important;
    cursor:pointer;
    border-width:0;
}
.accordion-button::after {
    border-style: solid;
    border-width:  2px 0 0 2px;
    content: "";
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    vertical-align: middle;
    float: right;
    transition: 0.2s;
    cursor: pointer;
    margin-top: auto;
    margin-bottom:auto;
}
.accordion-content {
    padding:0 24px;
    color: #2c3e50;
    background-color:white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: 0 0 4px 4px;
}
.active:after {
    transform: rotate(225deg);
    transition: 0.2s;
}
.function-btn_text:hover{
    cursor: pointer;
    text-decoration: underline;
}
.function-btn_text{
    color: var(--blue400);
    background-color: white;
    font-size: 1rem;
}
.function-btn-container{
    display: flex;
    flex-direction: row;
}
.divider-bottom{
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-bottom: 10px;
    border-radius: 0;
    border-bottom-color: #c9c9c9;
}
.delete-container{
    place-content: stretch flex-end;
    align-items: stretch;
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    padding: 16px 0;
    width: fit-content;
    margin-left: auto;
}
/* wrapper style for the layout */
.wrapper{
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    place-content: stretch center;
    align-items: stretch;
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    max-height: 100%;
}
.content-container{
    max-width: 1140px;
    padding:8px;
    height: 100%;
    width: 100%;
    place-content: stretch center;
    align-items: stretch;
    flex-direction: row;
    display: flex;
    box-sizing: border-box;
    max-height: 100%;
}
.main-content{
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    margin-right: 16px;
    max-width: 788px;
    width: 100%;
}
.side-content{
    max-width: 320px;
}
/* overlay */
#feedback-overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
}
.overlay-container {
    height:100%;
}

.overlay-wrapper{
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0; 
}
.overlay-pane{
    max-width: 80vw;
    position: static;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    max-height: 100%;
    box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
    background: white;
    color: #3b3b3b;
    padding: 24px;
    border-radius: 4px;
    overflow: auto;
    outline: 0;
    flex-direction: column;
    place-content: stretch flex-start;
}
/* textarea styles */
.textareaInput{
    border: 1px solid rgb(59, 59, 59);
    border-radius: 4px;
    width: 100%;
    min-height: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
    height: 100px;
    padding: 0 2px;
}
/* container for tullid button */
.tull-id-btn-container{
    padding:16px 0;
}
/* style for tull-id container */
.till-id-case{
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    position: relative;
    margin: 0 0 16px !important;
    padding: 16px 0 !important;
    border-radius: 4px;
    background: var(--white);
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	box-shadow:0 3px 7px 0px rgba(0, 0, 0, 0.3);
}
/* set style for hidden button */
.hidden-btn{
	display: none;
}
#feedback{
    display: none;
}
/* style for Slutanvändning accordion container  */
#slut_special .accordion-container{
	box-shadow: none;
}
/* Alternative for case with padding 16px */
.card{
	padding: 16px;
	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	box-shadow:0 3px 7px 0px rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
}