﻿@import url("/SU_Theme/Theme.SU_Theme.css?25817");

@import url("/SU_Theme/Theme.SU_Theme.css?242782&25817");

/* responsive context */
.tablet input[type="text"],
.tablet input[type="password"],
.tablet input[type="datetime"],
.tablet input[type="datetime-local"],
.tablet input[type="date"],
.tablet input[type="month"],
.tablet input[type="time"],
.tablet input[type="week"],
.tablet input[type="number"],
.tablet input[type="email"],
.tablet input[type="url"],
.tablet input[type="search"],
.tablet input[type="tel"],
.tablet input[type="color"],
.tablet select,
.phone input[type="text"],
.phone input[type="password"],
.phone input[type="datetime"],
.phone input[type="datetime-local"],
.phone input[type="date"],
.phone input[type="month"],
.phone input[type="time"],
.phone input[type="week"],
.phone input[type="number"],
.phone input[type="email"],
.phone input[type="url"],
.phone input[type="search"],
.phone input[type="tel"],
.phone input[type="color"],
.phone select {
    height: 40px;
}

/* Margin Top/Bottom after "fake" labels START */
.MarginT3{
    margin-top: 3px;
}

.MarginB3{
    margin-bottom: 3px;
}
/* Margin Top/Bottom after "fake" labels END */

/*Break word in combo START*/
.choices__list.choices__list--dropdown {
    word-break: break-word;
}
/*Break word in combo END*/


/*Layout_Wizard_Modal START*/
.phone .WizardSessionData {
    color: var(--color-white);
    bottom: -2px;
}
/*Layout_Wizard_Modal END*/


/*GroupButtonBothSelect START*/
.GroupButtonBothSelect .ButtonDiv {
    width:30%;
}

.phone .GroupButtonBothSelect .ButtonDiv {
    min-width: 100%;
}

.phone.landscape .GroupButtonBothSelect {
    width: 92%;
}

.tablet .GroupButtonBothSelect .ButtonDiv{
    width:46%;
}

/*GroupButtonBothSelect END*/


/*GroupButtonSimple START*/
.SimpleGroupButtonNotInForm .button-group{
    width:60%;
}

.phone.portrait .SimpleGroupButtonNotInForm .button-group{
    width:100%;
}

.tablet .SimpleGroupButtonNotInForm .button-group,
.phone.landscape .SimpleGroupButtonNotInForm .button-group{
    width:92%;
}

.phone .SimpleGroupButtonNotInForm .button-group label :not(:first-child){
    border-left: 2px solid var(--color-mediumGrey);
}

.phone .SimpleGroupButtonNotInForm .button-group label{
    padding-bottom:0px;
}

/*GroupButtonSimple END*/

/*Validation border for GroupButton START*/

.BtnGroupValidationMessage,
.SpecialInvalidGroupButon .button-group label .btn, 
.SpecialInvalidGroupButon .button-group label:not(:first-child) .btn {
    font-weight: var(--font-regular);
    margin-top: 0px;
    border-width: --border-size-m;
    border-color:#F44336;
    width:100%;
}

/*Validation border for GroupButton END*/
 
/*Validation border for combos START*/
.choices.Not_Valid .choices__inner {
    border: var(--border-size-m) solid #F44336;
}
/* Validation border for combos END*/

/*Buttons START*/
.MainArea__ContentFooter .Button  {
    min-width: 100px;
    margin-left: 15px;   
}

.phone.portrait .HasRightMenu:not(.HasLeftMenu).RightMenuClosed .MainArea__ContentFooter {
    padding-top: 0px;
}

.phone.portrait .FooterButtonBox{
    padding-top: 15px;
    padding-left: 15px;
}

.phone.landscape .FooterButtonBox .Button{
    width: 90%;
}

.phone.landscape .FooterButtonBox{
    padding-top: 15px;
}

.phone.landscape .FooterButtonBox .Button{
    width: 100px;
}

.phone.portrait .Footer2ButtonBox{
    padding-top: 0px;
}

.phone.landscape .MainArea__ContentFooter1 {
    padding-top: 0px;
    padding-right: 35px;
    }

.phone.landscape .Footer2ButtonBox .Button {
    width: 100px;
    margin-left: 15px;
}

.phone.portrait .Footer2ButtonBox .Button {
    width: 40%;
    margin-left: 15px;
}
/*Buttons END*/

/* Invalid class for the document upload webblocks inside an accordion */
.InvalidDocumentUploadAccordion {
    border-color:#db4048 !important;
    border-style:dashed !important;
    color:#db4048 !important;
}

/*Toggle button START*/
.toggle-button {
    margin-bottom: -6px;
}
/*Toggle button END*/

/*UpperCase START*/
.textTransformUppercase{
    text-transform: uppercase;
}
/*UpperCase END*/

/*Header START*/
.phone .RightActionsContainer {
    display: none;
}

.phone.portrait .BoxBorder .BoxTitle {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.phone.portrait .BoxBorder .BoxData {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.phone.portrait .BoxBorder .BoxSubTitle {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 6px;
}

.phone [class*="ThemeGrid_Width"]:not(.no-responsive) {
    margin: var(--space-none) var(--space-none) var(--space-none) var(--space-none);
}

.phone.portrait .Page.FixedFooter .MainContent {
    padding: calc(var(--theme-colorBar-horizontal) + 80px) 
                var(--space-base) 
                calc(var(--theme-colorBar-horizontal) + var(--theme-footer-height) 
                + var(--space-base));
}

.phone .HeaderWrapper.HeaderInfo {
    padding-top: 25px;
}

.phone .js-hasResumed .HeaderWrapper.HeaderInfo {
    padding-top: 25px;
}

.phone .js-hasResumed .js-hasScrolled .HeaderWrapper.HeaderInfo {
    padding-top: 15px;
}

.tablet.portrait .HasRightMenu:not(.HasLeftMenu) .MainArea__ContentFooter {
    width: 100%;
}
/*Header END*/


/*Landing page START*/
.ClaimsORImage {
    background-image: url(/ClaimsOR_Th/img/LandingPageImage.jpg?25430);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 15px;
}

.TitleStart {
    font-size: var(--font-size-h1);
    color: #4a4a4a;
    font-weight: bold;
}

.SubTitleStart {
    font-size: var(--font-size-s);
    color: #4a4a4a;
    min-width:150px;
}

.phone .TitleStart {
    line-height: 1;
    font-size: var(--font-size-h3);
}

.phone.landscape .TitleStart {
    max-width: 250px;
}

.LandingPageInput {
    width: 67%;
    min-width: 200px;
}

.phone.portrait .LandingPageInput{
    width: 100%;
    min-width: 200px;
}

.StartPageInput {
    width: 35%;
    min-width: 150px;
    margin-top: var(--space-base);
}

.phone.portrait .StartPageInput{
    width: 100%;
    min-width: 200px;
}

.phone.landscape .StartPageInput{
    width: 67%;
    min-width: 200px;
}

.tablet  input[type="text"].LandingPageInput{
    min-width: 200px;
}

.phone  input[type="text"].LandingPageInput{
    min-width: 200px;
}

.ContentResumed {
    margin-top: 30px;
}

.phone.landscape .ContentResumed {
    margin-bottom: 5%;   
}

.phone .House {
   margin: 9% 9% 3% 9%;
}

/* Warning FeedbackMessage color definition */
div.Feedback_Message_Warning {
    background-color: var(--color-info);
}

/*Landing page END*/


/* Claim Data page START*/

.Form.form-top label {
 display: inline-block;   
}

.CustomMandatoryLabel:after {
    color: var(--color-error);
    content: '*';
    margin-left: var(--space-s);
}

.InvalidMessage{
    color: #db4048;
    padding-top: 4px;
    font-size: var(--font-size-xs);
    font-weight: normal;
}

.InvalidMessageTablet{
    color: #db4048;
    padding-top: 4px;
    font-size: var(--font-size-xs);
    font-weight: normal;
    text-align: left;
    margin-left: 8%;
}

.FormBothButton > .ButtonDiv {
    max-width: 150px;
    width:50%;

}

.phone .FormBothButton > .ButtonDiv {
    min-width: 100%;
}

.phone.landscape .FormBothButton {
    width: auto;
}

.extraShortInputs {
    max-width: 80px;
}

.phone .extraShortInputSpace {
    margin-top: var(--space-m);   
}

.ShortInputs, .phone.landscape ShorInputs {
    width: 150px;   
}

.RegularInputs {
    max-width: 300px;   
}

.phone .RegularInputs {
    width: 100%;
}

.DescriptionInput {
    max-width: 100%;   
}

.AuthorizationToggle {
    margin-top: var(--space-s); 
}

.phone .AuthorizationToggle {
    margin-top: var(--space-m); 
}

.InputSize8Col {
    width: 79%;
    min-width: 200px;
    max-width: 280px;
}

.tablet.landscape .InputSize8Col {
    width: 80%;
}

.tablet.portrait .InputSize8Col {
    width: 35VW;
}

.phone.landscape .InputSize8Col {
    width: 80%;
}

.phone.portrait .InputSize8Col {
    width: 100%;
}

.desktop-small .InputSize8Col {
    min-width: 220px;
}

.AuthoritiesToogle {
    margin-right: 16.06px;
}

.NoWrapLabel{
    white-space: nowrap;
}

.phone .NoWrapLabel {
    white-space: none;
}

.tablet.landscape .Local{
    min-width:91%;
}

.tablet.portrait .Local{
    min-width:93%;
}

.tablet.landscape .HasRightMenu:not(.HasLeftMenu).RightMenuClosed .MainArea_Content input.InputSize8Col.Local{
    min-width: 84%;
}

.NoWrapExceptOnPhone {
    white-space: nowrap;
}

.phone .NoWrapExceptOnPhone {
  white-space: normal;   
}

/* Claim Data page END*/


/*Webblock: CrumbTabs - BEGIN*/

.CustomCrumbContainer .breadcrumbs-item{
    color: var(--color-neutral-10);
    font-size: var(--font-size-h5);
    font-weight: var(--font-regular);
    line-height: 1.6;
    padding: var(--space-none) var(--space-xs);
    padding-left: 0px;
}

.CustomCrumbContainer .breadcrumbs-item .icon .fa-fw {
    font-size: var(--font-size-m);
    width: auto;
    padding-left: 10px;
}

.CurrentCrumb .breadcrumbs-item{
    font-size: var(--font-size-h4);
    color: var(--color-primary);
    font-weight: var(--font-semi-bold);
    line-height: 1.45;
    padding: var(--space-none) var(--space-xs);
    }
        
.phone.portrait .MultipleTabCrumb .breadcrumbs{
    display: inline !important;
}  

.CustomCrumbContainer div[onclick].CrumbInactive {
    cursor: default;
}

.MultipleTabCrumb .ListRecords {
    display: flex;
}

.phone.portrait .MultipleTabCrumb .ListRecords {
    display: block;
}

.MultipleTabCrumb.BreakedCrumb .breadcrumbs{
    display: block;
}
/*Webblock: CrumbTabs - END*/

*Screen: HolderData - BEGIN*/

.BottomNavegationTab {
 margin-top: 0px;   
}

.phone .BottomNavegationTab {
 margin-top: var(--space-s);   
}

.LineSeparator > .margin-y-m {
    margin-top: calc(var(--space-m) + 5px);  
}

.UploadDocumentContainer {
    width: 300px;   
}

.phone .UploadDocumentContainer {
    width: 100%; 
    margin-left: 0px;
}
/*Screen: HolderData - END*/

/*Screen: ThirdParty - BEGIN*/
.AccordionItemWrapperContainer{
    position:relative;
}

.AcItemWrapperActionPlaceHolder{
    position: absolute;
    height: 50px;
    width: 50px;
    right: 45px;
    top: 30px;
    z-index: 5;
}

.HasRightMenu:not(.HasLeftMenu) .MainArea__ContentFooter {
    z-index: 8;
}
.BottomColorBar {
    z-index: 8;
}

.phone.portrait .AcItemWrapperActionPlaceHolder{
    right:40px;
}

.AccordionItemWrapperPlaceholder{
    z-index: 1;
}

.ThirdPartyAccordionItemContent .columns.gutter-m > .columns-item{
    padding-bottom: 0;
    margin-bottom: 0;
}

.ThirdPartyAccordionItemContent .phone-break-all:only-child > .columns-item:not(:last-child) {
    margin-bottom: 0;
}

.phone .ThirdPartyAccordionItemContent .columns.gutter-m.phone-break-all:only-child > .columns-item:not(:last-child) {
    margin-bottom: 0;
}

.AccordionCustomLabel{
    color: var(--color-black);
    font-size: var(--font-size-s);
    font-weight: var(--font-bold);
    padding: 0 0 5px;
}

.AccordionCustomLabel.ListMandatoryLabel:after {
    color: var(--color-error);
    content: '*';
    margin-left: var(--space-s);
}

.ThirdPartyToggle{
    padding-bottom: 10px;
}

.ThirdPartyLong,
.Address{
    width: 92%;
}

.tablet .Address{
    width:100%;
}

.ThirdPartyShort,
.PostalCode{
    width: 92%;
    min-width:100px;
}

.tablet .ThirdPartyShort,
.phone.landscape .ThirdPartyShort{
    margin-left:8%;
    width:46%
}

.tablet .PostalCode,
.phone.landscape .PostalCode{
    width:69%
}

.Place{
    width: 100%;
}

.tablet .Place,
.phone.landscape .Place{
    width:110%;
    margin-left:-10%;
}

.phone.portrait .ThirdPartyLong,
.phone.portrait .Address,
.phone.portrait .PostalCode,
.phone.portrait .Place,
.phone.portrait .ThirdPartyMedium,
.phone.portrait .ThirdPartyShort{
    width: 100%;
}

.phone.landscape .Address{
    width: 100%;
}

.phone.portrait .ThirdPartyTitle{
    overflow: hidden;
    text-overflow: ellipsis;
   }

.tablet.landscape .DoubleToggleContainer{
    max-width:300px;
}

.ThirdPartyAccordionItemContent{
    padding-top: 15px;
    border-top: 1px solid;
    border-color: var(--color-lightGrey);
    }

.SpecialMedium{
    width:60%;   
}

.tablet .SpecialMedium,
.phone.landscape .SpecialMedium{
    width:92%;
}

.phone.portrait .SpecialMedium{
    width:100%;
}

.SpecialDamageLabel{
    margin-right:calc(92% - 53.11px);
}

/*Screen: ThirdParty - END*/

/*WebBlock: MaterialDamageDetails - START*/
.descriptionComboBox {
    width: 100%;   
}
        
.tablet.portrait .descriptionComboBox {
      width: 300px; 
}

.tablet.landscape .descriptionComboBox {
      width: 100%;
      min-width: 300px;
}

.phone .descriptionComboBox {
    width: 100%;   
}

.valueInput {
    width: 150px;   
}

.sideValueInput {
    margin-left: 15px;
}

.tablet.portrait .sideValueInput {
    margin-left: 25px;
}

.tablet .MenuClosed.RightMenuClosed .sideValueInput {
    margin-left: 25px;
}

.phone .sideValueInput {
    margin-left: 0px;
    /*margin-top: 10px;*/
    margin-top: var(--space-m);
}

.descriptionListContainer .columns-item {
    padding: 0px;
    margin: 0px;
}

.TotalValueDiv {
    margin-top: var(--space-m);
    width: 30%;
}

.tablet .TotalValueDiv,
.phone.landscape .TotalValueDiv
{
    width:46%;
}

.phone .TotalValueDiv {
    margin-top: calc(var(--space-m) + 12px);
}

.phone.portrait .TotalValueDiv{
    width:50%;
}

.AddDetailButtonContainer > .ButtonAdd {
    margin-bottom: var(--space-m);
    width: 165px;
    padding-top: var(--space-m)
}

.phone.portrait .AddDetailButtonContainer > .ButtonAdd {
    margin-top: 0px;
}


.IVAContainer{
    width: 92%;
}

.tablet .IVAContainer{
    margin-left:8%;
    width:46%
}

.phone.landscape .IVAContainer{
    width: 100%;
}

.phone.portrait .IVAContainer {
    margin-top: var(--space-xs);
    width:50%;
}

.phone.landscape .IVAContainer{
    margin-left:8%;
    width:46%
}

/*WebBlock: MaterialDamageDetails - END*/

/*CONFIRMATION START*/

.tablet .ConfirmationModal .CustomModalPopup{
    width:90%;    
}

.phone .ConfirmationModal .CustomModalPopup .modal-wrapper{
    width:100%;    
}

.ConfirmationModal .CustomModalPopup .modal-wrapper{
    max-width: 850px;;    
}

.phone .Contacts .ListRecords {
    margin-bottom: 15px;
}

.Contacts .columns.gutter-xs > .columns-item {
    margin-bottom: var(--space-none);
    padding: var(--space-none) calc(var(--space-xs) / 2);
}

.IBANContacts .DocContent{
    width: 23%;
    min-width: 150px;
}

.tablet .IBANContacts .DocContent{
    width: 40%;
    min-width: 150px;
}

.phone .IBANContacts .DocContent{
    width: 100%;
    min-width: 150px;
}

.columns.gutter-m > .columns-item {
    margin-bottom: 0px;
}

.IBANContacts {
    margin-top:var(--space-m);
}

/*CONFIRMATION END*/

/* Screen: End - Start */

.EndTitle {
    font-size: var(--font-size-h4);
}

.tablet .EndTitle {
    font-size: var( --font-size-h6);
}

.phone .EndTitle {
    font-size: var(--font-size-xs);
    margin-top: 10px;
}

.EndSubTitle {
    color: var(--color-primary);
    font-size: var(--font-size-h1);
    text-decoration: underline;
    margin-top: 0px;
    padding: 0px 0px 0px 0px;
}

.tablet .EndSubTitle {
    font-size: var(--font-size-h4);
    color: var(--color-primary);
    text-decoration: underline;
}

.phone .EndSubTitle {
    font-size: var(--font-size-base);
    color: var(--color-primary);
    text-decoration: underline;
}

.PDFContainer {
    background-color: var(--color-white);
    opacity: 0.9;
    margin-top: 30px;
    border-radius:6px;
}

.phone .PDFContainer{
    margin-top: 15px;
}

.tablet.landscape .PDFContainer,
.phone.landscape .PDFContainer{
    margin-top: 15px;
    margin-bottom: 15px;
}

.tablet.portrait .PDFContainer {
    width: 80%;
}

.EndContentContainer {
    width:  100%;
}

.PDFContainer .tablet .columns.gutter-l.tablet-break-first:only-child > .columns-item:not(:last-child), 
.PDFContainer .phone .columns.gutter-l.phone-break-first:only-child > .columns-item:not(:last-child), 
.PDFContainer .tablet .columns.gutter-l.tablet-break-last:only-child > .columns-item:not(:last-child), 
.PDFContainer .phone .columns.gutter-l.phone-break-last:only-child > .columns-item:not(:last-child), 
.PDFContainer .tablet .columns.gutter-l.tablet-break-middle:only-child > .columns-item:not(:last-child), 
.PDFContainer .phone .columns.gutter-l.phone-break-middle:only-child > .columns-item:not(:last-child), 
.PDFContainer .tablet .columns.gutter-l.tablet-break-all:only-child > .columns-item:not(:last-child), 
.PDFContainer .phone .columns.gutter-l.phone-break-all:only-child > .columns-item:not(:last-child) {
    margin-bottom: 0;
}

.EndModalContainer{
    min-width: 50vw;
}

.desktop-small .EndModalContainer{
    min-width: 70vw;
}

.phone .EndModalContainer,
.tablet .EndModalContainer{
    min-width: 80vw;
}

.EndModalContainer .modal-content {
    min-width: 50vw;
    overflow-y: auto;
    max-height: 100%;
    height:80vh;
}

.desktop-small .EndModalContainer .modal-content {
    min-width: 70vw;
}

.phone .EndModalContainer .modal-content,
.tablet .EndModalContainer .modal-content{
    min-width: 80vw;
}

.EndModalContainer .modal-wrapper {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-xl);
    max-height: 100%;
    min-width: 50vw;
    width: 100%;
}

.desktop-small .EndModalContainer .modal-wrapper{
    min-width: 70vw;
}

.phone .EndModalContainer .modal-wrapper,
.tablet .EndModalContainer .modal-wrapper{
    min-width: 80vw;
}


/* Screen: End - End */

/* Accordion START */

.SubtitleAccordion{
    font-weight: bold;
    text-decoration: underline;
}

.AccordionNameDiv {
    width: calc(100% - 38px);
    display: inline-block;
}

.phone .AccordionNameDiv {
    width: calc(100% - 38px);
    display: inline-block;
  }
  
.tablet .AccordionNameDiv {
    width: calc(60% - 38px);
    display: inline-block;
}

.tablet.landscape .AccordionNameDiv {
    width: calc(100% - 38px);
    display: inline-block;
}

.AddRemoveItem .OSInline {
    display: inline-block !important;
    vertical-align: top;
}

.phone .AddRemoveItem {
    margin-left: 0px;
    margin-top: 0px;
}
.AccordionNameDiv .columns-item {
    margin-bottom: 0px !important;
}

.AccordionThirdPartyDetailsLeft{
    margin-left: 5px;
    display: inline-block;
}

.AccordionThirdPartyDetailsRight{
    margin-left: 5px;
    display: inline-block;
}

.SubsectionMargin{
    margin-bottom: 10px;
}

.SubsectionMarginTop{
    margin-top: 5px;
}

.CustomAccordionItem_Content .columns:only-child > .columns-item {
    margin-bottom: var(--space-xs);
}

.AccordionTotalValue{
    margin-bottom: calc(-1*var(--space-xs));
}
/* Accordion END */

/* START InfoIcon Webblock */

.InfoTooltip {
    text-align: left;
    color: var(--color-primary);
    max-width: 250px;  
    display: inline-block;
}

.tablet.portrait .ShipNameTooltip .tooltip {
    max-width: 30vw;
    white-space: normal;
}

/* END InfoIcon Webblock */



/* START Green scrollbar for whole page */

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    margin-left: 3px;
    box-shadow: inset 0 0 3px grey;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary); 
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary); 
}

/* END Green scrollbar for whole page */