.sw-toolbar-bottom { margin-top: 20px; margin-left: 5px; } /* ---------------------------------------------------------------------------------------------------------------- */ .dcat-step-box { margin: 0 auto; } .dcat-step { box-sizing: border-box; padding: 0; color: rgba(0, 0, 0, 0.65); /*font-variant: tabular-nums;*/ line-height: 1.5; list-style: none; /*font-feature-settings: "tnum";*/ display: flex; width: 100%; font-size: 0; margin: 0 auto 30px; } .dcat-step-item { position: relative; display: inline-block; flex: 1 1; overflow: hidden; vertical-align: top; } .dcat-step-item-container { outline: 0; border: 0 !important; } .dcat-step-item:last-child { flex: none; } .dcat-step-item:last-child > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after, .dcat-step-item:last-child > .dcat-step-item-container > .dcat-step-line { display: none; } .dcat-step-content, .dcat-step-icons { display: inline-block; vertical-align: top; } .dcat-step-icons { width: 32px; height: 32px; margin-right: 8px; font-size: 16px; line-height: 32px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 32px; transition: background-color 0.3s, border-color 0.3s; } .dcat-step-icons > .dcat-step-icon { position: relative; top: -1px; color: rgba(0, 0, 0, 0.25); line-height: 1; } .dcat-step-line { position: absolute; top: 12px; left: 0; width: 100%; padding: 0 10px; } .dcat-step-line:after { display: inline-block; width: 100%; height: 1px; background: #e8e8e8; border-radius: 1px; transition: background 0.3s; content: ""; } .dcat-step-title { position: relative; display: inline-block; padding-right: 16px; color: rgba(0, 0, 0, 0.65); font-size: 16px; line-height: 32px; } .dcat-step-title:after { position: absolute; top: 16px; left: 100%; display: block; width: 9999px; height: 1px; background: #e8e8e8; content: ""; } .dcat-step-desc { color: rgba(0, 0, 0, 0.45); font-size: 14px; } .active .dcat-step-icons { background-color: #fff; border-color: #5c6bc6; } .active .dcat-step-icons > .dcat-step-icon { color: #5c6bc6; } .active .dcat-step-icons > .dcat-step-icon .dcat-step-icon-dot { background: #5c6bc6; } .active > .dcat-step-item-container > .dcat-step-content > .dcat-step-title { color: rgba(0, 0, 0, 0.85); } .active > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after { background-color: #e8e8e8; } .active > .dcat-step-item-container > .dcat-step-content > .dcat-step-desc { color: rgba(0, 0, 0, 0.65); } .active > .dcat-step-item-container > .dcat-step-line:after { background-color: #e8e8e8; } .active .dcat-step-icons { background: #5c6bc6; } .active .dcat-step-icons > .dcat-step-icon { color: #fff; } .active .dcat-step-title { font-weight: 500; } .done .dcat-step-icons { background-color: #fff; border-color: #5c6bc6; } .done .dcat-step-icons > .dcat-step-icon { color: #5c6bc6; } .done .dcat-step-icons > .dcat-step-icon .dcat-step-icon-dot { background: #5c6bc6; } .done > .dcat-step-item-container > .dcat-step-content > .dcat-step-title { color: rgba(0, 0, 0, 0.65); } .done > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after { background-color: #5c6bc6; } .done > .dcat-step-item-container > .dcat-step-content > .dcat-step-desc { color: rgba(0, 0, 0, 0.45); } .done > .dcat-step-item-container > .dcat-step-line:after { background-color: #5c6bc6; } .danger .dcat-step-icons { background-color: #fff; border-color: #bd4147; } .danger .dcat-step-icons > .dcat-step-icon { color: #bd4147; } .danger .dcat-step-icons > .dcat-step-icon .dcat-step-icon-dot { background: #bd4147; } .danger > .dcat-step-item-container > .dcat-step-content > .dcat-step-title { color: #bd4147; } .danger > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after { background-color: #e8e8e8; } .danger > .dcat-step-item-container > .dcat-step-content > .dcat-step-desc { color: #bd4147; } .danger > .dcat-step-item-container > .dcat-step-line:after { background-color: #e8e8e8; } .dcat-step-item.dcat-step-next-error .dcat-step-title:after { background: #bd4147; } .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] { cursor: pointer; } .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] .dcat-step-desc, .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] .dcat-step-icons .dcat-step-icon, .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button] .dcat-step-title { transition: color 0.3s; } .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-desc .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-title { color: #5c6bc6; } .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-icons { border-color: #5c6bc6; } .dcat-step .dcat-step-item:not(.active) > .dcat-step-item-container[role=button]:hover .dcat-step-icons .dcat-step-icon { color: #5c6bc6; } .dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item { margin-right: 16px; white-space: nowrap; } .dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item:last-child { margin-right: 0; } .dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item:last-child .dcat-step-title { padding-right: 0; } .dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-line { display: none; } .dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-desc { max-width: 140px; white-space: normal; } .dcat-step-sm.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item { margin-right: 12px; } .dcat-step-sm.dcat-step-horizontal:not(.dcat-step-label-vertical) .dcat-step-item:last-child { margin-right: 0; } .dcat-step-sm .dcat-step-icons { width: 24px; height: 24px; font-size: 12px; line-height: 24px; text-align: center; border-radius: 24px; } .dcat-step-sm .dcat-step-title { padding-right: 12px; font-size: 14px; line-height: 24px; } .dcat-step-sm .dcat-step-title:after { top: 12px; } .dcat-step-sm .dcat-step-desc { color: rgba(0, 0, 0, 0.45); font-size: 14px; } .dcat-step-sm .dcat-step-line { top: 8px; } @media (max-width: 540px) { .dcat-step-horizontal.dcat-step-label-horizontal { display: block; } .dcat-step-box .nav-tabs > li { float: none; } .dcat-step-box .nav-tabs > li > a { padding: 0; } .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-item { display: block; overflow: visible; } .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-icons { float: left; margin-right: 16px; } .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-content { display: block; overflow: hidden; } .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-title { line-height: 32px; } .dcat-step-horizontal.dcat-step-label-horizontal .dcat-step-desc { padding-bottom: 12px; } .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item > .dcat-step-item-container > .dcat-step-line { position: absolute; top: 0; left: 16px; width: 1px; height: 100%; padding: 38px 0 6px; } .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item > .dcat-step-item-container > .dcat-step-line:after { width: 1px; height: 100%; } .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item:not(:last-child) > .dcat-step-item-container > .dcat-step-line { display: none; } .dcat-step-horizontal.dcat-step-label-horizontal > .dcat-step-item > .dcat-step-item-container > .dcat-step-content > .dcat-step-title:after { display: none; } .dcat-step-horizontal.dcat-step-label-horizontal.dcat-step-sm .dcat-step-item-container .dcat-step-title { line-height: 24px; } } .dcat-step-label-vertical .dcat-step-item { overflow: visible; } .dcat-step-label-vertical .dcat-step-line { margin-left: 51px; padding: 3.5px 24px; left: 18px; top: 23px; } .dcat-step-label-vertical .dcat-step-content { display: block; width: 104px; margin-top: 8px; text-align: center; } .dcat-step-label-vertical .dcat-step-icons { display: inline-block; margin-left: 36px; } .dcat-step-label-vertical .dcat-step-title { padding-right: 0; } .dcat-step-label-vertical .dcat-step-title:after { display: none; } .dcat-step-label-vertical.dcat-step-sm:not(.dcat-step-dot) .dcat-step-icons { margin-left: 40px; } .dcat-step-dot .dcat-step-title, .dcat-step-dot.dcat-step-sm .dcat-step-title { line-height: 1.5; } .dcat-step-dot .dcat-step-line, .dcat-step-dot.dcat-step-sm .dcat-step-line { top: 2px; width: 100%; margin: 0 0 0 70px; padding: 0; } .dcat-step-dot .dcat-step-line:after, .dcat-step-dot.dcat-step-sm .dcat-step-line:after { width: calc(100% - 20px); height: 3px; margin-left: 12px; } .dcat-step-dot .dcat-step-item:first-child .dcat-step-icon-dot, .dcat-step-dot.dcat-step-sm .dcat-step-item:first-child .dcat-step-icon-dot { left: 2px; } .dcat-step-dot .dcat-step-icons, .dcat-step-dot.dcat-step-sm .dcat-step-icons { width: 8px; height: 8px; margin-left: 67px; padding-right: 0; line-height: 8px; background: 0 0; border: 0; } .dcat-step-dot .dcat-step-icons .dcat-step-icon-dot, .dcat-step-dot.dcat-step-sm .dcat-step-icons .dcat-step-icon-dot { position: relative; float: left; width: 100%; height: 100%; border-radius: 100px; transition: all 0.3s; } .dcat-step-dot .dcat-step-icons .dcat-step-icon-dot:after, .dcat-step-dot.dcat-step-sm .dcat-step-icons .dcat-step-icon-dot:after { position: absolute; top: -12px; left: -26px; width: 60px; height: 32px; background: rgba(0, 0, 0, 0.001); content: ""; } .dcat-step-dot .dcat-step-content, .dcat-step-dot.dcat-step-sm .dcat-step-content { width: 140px; } .dcat-step-dot .active .dcat-step-icons, .dcat-step-dot.dcat-step-sm .active .dcat-step-icons { width: 10px; height: 10px; line-height: 10px; } .dcat-step-dot .active .dcat-step-icons .dcat-step-icon-dot, .dcat-step-dot.dcat-step-sm .active .dcat-step-icons .dcat-step-icon-dot { top: -1px; } .dcat-step-item a { font-weight: normal !important; }