/* Attestasjonsflyt diagram i eget vindu */
/* Åpnes fra Attestasjon og fra Attesterte bilag */
.ddDisplayAttestationFlow .ddQuickRegContainer h2{
    margin-left:0;
    float:left;
}

.ddDisplayAttestationFlow .ddQuickRegContainer{
    display:flex;
    flex-direction:column;
    padding:0 20px 12px 20px;
}

.attestationFlowDiagramContainer {
    overflow-x:scroll;
    border:1px solid #cecece;
    border-bottom:none;
    height:133px;
    float:left;
    margin-top:15px;
}

.attestationFlowDiagram{
    position:relative;
    padding:20px;
    display: flex;
}

.attestationFlowInfoButton {
    margin: -12px 0 0 15px;
    float: left;
    height: 17px;
    width: 17px;
    background-image: url(../../../../shared/content/img/info.svg);
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    background-color: #fff;
    cursor: pointer;
}

.attestationFlowChangeFlow{
    display:flex;
    margin: 40px 0 10px 0;
}

.attestationFlowChangeFlow .changeFlowButton{
    margin-left:-25px;
}

/* Elementene i flyten */
.attestationFlowDiagram .circleGroup {
    position: relative;
    z-index: 3;
    float: left;
    white-space: nowrap;
}

.circleGroup .name{
    width:10px;
    font-size:12px;
}

.attestationFlowDiagram .lineGroup {
    position: relative;
    z-index:1;
    float:left;
    top:22px;
    margin-left:-10px;
}

.attestationFlowDiagram .diagramCircle {
    position:relative;
    height: 20px;
    width: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top:5px;
}

.k-grid .attestationFlowDiagramContainerGrid .diagramCircle {
    margin-top: -2px;
}

.attestationFlowDiagram .diagramCircleGroup,
.attestationFlowDiagram .diagramCircleGroupGreen,
.attestationFlowDiagram .diagramCircleGroupRed,
.attestationFlowDiagram .diagramCircleGroupSkipped{
    width:30px;
}

/* Ikonene */
.attestationFlowDiagram .diagramCircleGreen {
    background-image: url(../../../../shared/content/img/AttestantAttestert.png);
}

.attestationFlowDiagram .diagramCircleRed {
    background-image: url(../../../../shared/content/img/AttestantAttestant.png);
}

.attestationFlowDiagram .diagramCircleSkipped {
    background-image: url(../../../../shared/content/img/AttestantHoppetOver.png);
}

.attestationFlowDiagram .diagramCircleGrey {
    background-image: url(../../../../shared/content/img/AttestantTilAttestering.png);
}

.attestationFlowDiagram .diagramCircleGroup {
    background-image: url(../../../../shared/content/img/AttestantGruppeTilAttestering.png);
}

.attestationFlowDiagram .diagramCircleGroupRed {
    background-image: url(../../../../shared/content/img/AttestantGruppeAttestant.png);
}

.attestationFlowDiagram .diagramCircleGroupGreen {
    background-image: url(../../../../shared/content/img/AttestantGruppeAttestert.png);
}

.attestationFlowDiagram .diagramCircleGroupSkipped {
    background-image: url(../../../../shared/content/img/AttestantGruppeHoppetOver.png);
}

/* Hopp over attestant ikon */
.attestationFlowDiagram .diagramSkipArrow {
    height: 15px;
    width: 30px;
    background-image: url(../../../../shared/content/img/AttestantHoppOver.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
    background-color: transparent;
    cursor:pointer;
    margin-top:10px;
}

/* Legg til attestant ikon */
.attestationFlowDiagram .diagramAddAttestant {
    height: 25px;
    width: 25px;
    background-image: url(../../../../shared/content/img/AttestanterLeggTil.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
    background-color: transparent;
    cursor: pointer;
    margin-top: 10px;
}

.attestationFlowDiagram .lastAddAttestant {
    float: left;
    margin-top: 39px;
    margin-left: 50px;
}


/* Buttons */
.ddDisplayAttestationFlow .ddButtonContainer {
    margin: 20px 0 10px 0;
}

.ddDisplayAttestationFlow .ddButtonContainer .k-button,
.ddAttestantAdd .ddButtonContainer .k-button{
    padding: 5px 20px;
    margin-right:5px;
    background-color:#0e3a2e;
    color:#fff;
}

.ddDisplayAttestationFlow .ddButtonContainer a,
.ddAttestantAdd .ddButtonContainer a{
    margin:5px 0 0 10px;
}

.ddAttestantAdd .ddButtonContainer {
    margin: 20px 0 20px 23px;
    width: 95%;
}

/* Legg til attestanter dialog */
.ddAttestantAdd .ddQuickRegContainer{
    padding:0;
    margin-top:-23px;
    display:flex;
    flex-direction:column;
}

.ddAttestantAdd .newAttestant,
.ddAttestantAdd .newGroup,
.ddAttestantAdd .newFlow {
    background-repeat: no-repeat;
    background-size: contain;
    float: right;
}

.ddAttestantAdd .newAttestant {
    background-image: url(../../../../shared/content/img/AttestantAddAttestant.png);
    height: 15px;
    width: 15px;
    margin: -20px 7px 0 0;
}

.ddAttestantAdd .newGroup {
    background-image: url(../../../../shared/content/img/AttestantAddGruppe.png);
    height: 19px;
    width: 19px;
    margin: -20px 7px 0 0;
}

.ddAttestantAdd .ddinfomarker{
    margin-top:-23px;
}


/* Rapporten Attesterte bilag */
/* Visning av Attestasjonsflytdiagram i en kolonne */
.attestationFlowDiagramContainerGrid div{
    margin-left:0 !important;
    padding-left:0;
}

.attestationFlowDiagramContainerGrid {
    float: left;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    cursor: pointer;
    display:-ms-grid; /*for IE*/
    -ms-grid-columns:max-content; /*for IE*/
}

.attestationFlowDiagramGrid {
    position: relative;
    width: -webkit-max-content;
    width: -moz-max-content;
}

.attestationFlowDiagramContainerGrid::-webkit-scrollbar {
    height: 9px; /* for horizontal scrollbars */
}

.attestationFlowDiagramContainerGrid::-webkit-scrollbar-track {
    background: #fcfcfc;
}

.attestationFlowDiagramContainerGrid::-webkit-scrollbar-thumb {
    background: #ededed;
    border: 1px solid #cecece;
}

/* Elementene i flyten */
.attestationFlowDiagramGrid .circleGroup {
    position: relative;
    z-index: 3;
    float: left;
    white-space: nowrap;
    margin-bottom:5px;
}

.attestationFlowDiagramGrid .circleGroup .name {
    width: 70px;
    font-size: 10px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.attestationFlowDiagramGrid .lineGroup {
    position: relative;
    z-index: 1;
    float: left;
    top: 16px;
    margin-left: -55px !important;
}

.attestationFlowDiagramGrid .diagramCircle {
    position: relative;
    height: 15px;
    width: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 5px;
}

.attestationFlowDiagramGrid .diagramCircleGroup,
.attestationFlowDiagramGrid .diagramCircleGroupGreen,
.attestationFlowDiagramGrid .diagramCircleGroupRed,
.attestationFlowDiagramGrid .diagramCircleGroupSkipped {
    width: 30px;
}

/* Ikonene */
.attestationFlowDiagramGrid .diagramCircleGreen {
    background-image: url(../../../../shared/content/img/AttestantAttestert.png);
}

.attestationFlowDiagramGrid .diagramCircleRed {
    background-image: url(../../../../shared/content/img/AttestantAttestant.png);
}

.attestationFlowDiagramGrid .diagramCircleSkipped {
    background-image: url(../../../../shared/content/img/AttestantHoppetOver.png);
}

.attestationFlowDiagramGrid .diagramCircleGrey {
    background-image: url(../../../../shared/content/img/AttestantTilAttestering.png);
}

.attestationFlowDiagramGrid .diagramCircleGroup {
    background-image: url(../../../../shared/content/img/AttestantGruppeTilAttestering.png);
}

.attestationFlowDiagramGrid .diagramCircleGroupRed {
    background-image: url(../../../../shared/content/img/AttestantGruppeAttestant.png);
}

.attestationFlowDiagramGrid .diagramCircleGroupGreen {
    background-image: url(../../../../shared/content/img/AttestantGruppeAttestert.png);
}

.attestationFlowDiagramGrid .diagramCircleGroupSkipped {
    background-image: url(../../../../shared/content/img/AttestantGruppeHoppetOver.png);
}
/* Slutt: Attestasjonsflyt diagram i rapporten Attesterte bilag */



/* DisplayAttestationFlow info vindu */
/* Styling av tekst og bilder i ressursfil */
.attestationFlowInfo {
    width: 95%;
    padding:12px;
}

.attestationFlowInfo .ddrow{
    margin-bottom:10px;
}

.attestationFlowInfo .img{
    float:left;
}

.attestationFlowInfo .text{
    float:left;
    width:600px;
}

.attestationFlowInfo .img{
    background-repeat: no-repeat;
    background-size: contain;
    height: 20px;
    width: 20px;
    margin: 1px 10px 0 0;
}

.attestationFlowInfo .img.attestert{
    background-image: url(../../img/AttestantAttestert.png);
}

.attestationFlowInfo .img.gruppe{
    background-image: url(../../img/AttestantGruppeAttestert.png);
}

.attestationFlowInfo .img.hoppet{
    background-image: url(../../img/AttestantHoppetOver.png);
}

.attestationFlowInfo .img.attesterer{
    background-image: url(../../img/AttestantAttestant.png);
}

.attestationFlowInfo .img.attesteres{
    background-image: url(../../img/AttestantTilAttestering.png);
}

.attestationFlowInfo .img.hoppe{
    background-image: url(../../img/AttestantHoppOver.png);
}

.attestationFlowInfo .img.leggtil{
    background-image: url(../../img/AttestanterLeggTil.png);
}
/* Slutt: DisplayAttestationFlow info vindu */