Mai devreme sau mai tarziu cu totii avem nevoie de o astfel de grafica pentru acest tip de eroare generata de server.
<div class="error"> <div class="error-layer"> <div class="error-layer-row"> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> </div> <div class="error-layer-row"> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> </div> <div class="error-layer-row"> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> <div class="error-layer-row-box"> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> <div class="error-layer-row-box-area-brik"> <div class="error-layer-row-box-brik"></div> </div> </div> </div> </div> <div class="error-layer"> <div class="error-layer-pipes"> <div class="error-layer-pipe-space-left"> <div class="error-layer-pipe-space-left-v1"></div> <div class="error-layer-pipe-space-left-v2"></div> <div class="error-layer-pipe-space-left-v3"></div> <div class="error-layer-pipe-space-left-v4"></div> <div class="error-layer-pipe-space-left-v5"></div> </div> <div class="error-layer-pipe-space-top"> <div class="error-layer-pipe-space-top-left"> <div class="error-layer-pipe-space-top-v1"></div> <div class="error-layer-pipe-space-top-v2"></div> <div class="error-layer-pipe-space-top-v3"></div> <div class="error-layer-pipe-space-top-v4"></div> <div class="error-layer-pipe-space-top-v5"></div> </div> <div class="error-layer-pipe-space-top-right"> <div class="error-layer-pipe-space-top-v1"></div> <div class="error-layer-pipe-space-top-v2"></div> <div class="error-layer-pipe-space-top-v3"></div> <div class="error-layer-pipe-space-top-v4"></div> <div class="error-layer-pipe-space-top-v5"></div> </div> </div> </div> </div> <div class="error-layer"> <div class="error-layer-area"> <div class="error-layer-area-inside"> <div class="error-layer-area-inside-paper"> <div class="error-layer-area-inside-paper-top"> <div class="error-layer-area-inside-paper-top1"> <div class="error-layer-area-inside-paper-top1-circle"></div> </div> <div class="error-layer-area-inside-paper-top2"> <div class="error-layer-area-inside-paper-top2-line"></div> </div> </div> <div class="error-layer-area-inside-paper-body"> <div class="error-layer-area-inside-paper-body-area"> <div class="error-layer-area-inside-paper-body-area-ui"> <div class="error-layer-area-inside-paper-body-area-ui-err404"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-txt"> <div>ERROR 404</div> <div>Pagina nu exista.</div> </div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cables"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-line"></div> </div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother1"></div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother2"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother21"></div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother21"></div> </div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother3"></div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother4"></div> </div> </div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father4"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father41"></div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father41"></div> </div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father3"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father31"></div> </div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father2"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father21"></div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father21"></div> </div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father1"></div> </div> </div> </div> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable"> <div class="error-layer-area-inside-paper-body-area-ui-err404-layer-cable-line"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.error-layer,
.error-layer-row,
.error-layer-pipes,
.error-layer-pipe-space-left,
.error-layer-pipe-space-top,
.error-layer-row-box,
.error-layer-row-box-area-brik,
.error-layer-area,
.error-layer-area-inside,
.error-layer-area-inside-paper-top1,
.error-layer-area-inside-paper-top2,
.error-layer-area-inside-paper-body-area-ui-err404-layer,
.error-layer-area-inside-paper-body-area-ui-err404-layer-txt,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cables,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father3,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father4{
display: flex;
}
.error-layer-row-box{
flex-direction: column;
}
.error-layer-row-box,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn{
justify-content: space-between;
}
.error-layer:nth-child(1),
.error-layer-row{
justify-content: space-around;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father4{
justify-content: space-evenly;
}
.error-layer-row-box-area-brik:nth-child(2n),
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father{
justify-content: flex-end;
}
.error-layer-area-inside,
.error-layer-area-inside-paper-top1,
.error-layer-area-inside-paper-body-area-ui-err404-layer-txt{
justify-content: center;
}
.error-layer-pipe-space-top,
.error-layer-area-inside,
.error-layer-area-inside-paper-top1,
.error-layer-area-inside-paper-top2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-txt,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cables,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father3{
align-items: center;
}
.error-layer-area-inside-paper-top2{
align-self: flex-end;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer:nth-child(1),
.error-layer-area-inside-paper-body-area-ui-err404-layer-txt,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father4{
flex-direction: column;
}
.error,
.error-layer-area-inside-paper-top1,
.error-layer-area-inside-paper-top2{
position: relative;
}
.error-layer{
position: absolute;
}
.error-layer,
.error-layer-row,
.error-layer-area,
.error-layer-area-inside-paper-top2-line,
.error-layer-area-inside-paper-body-area-ui-err404-layer-txt,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cables,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father{
width: 100%;
}
.error-layer,
.error-layer-row-box,
.error-layer-pipes,
.error-layer-pipe-space-left,
.error-layer-pipe-space-top-left,
.error-layer-area,
.error-layer-area-inside-paper-body-area{
height: 100%;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father{
height: 50%;
}
.error-layer-pipe-space-left-v1,
.error-layer-pipe-space-top-v5{
background: #6d6b5b;
}
.error-layer-pipe-space-left-v2,
.error-layer-pipe-space-top-v4{
background: #423d2d;
}
.error-layer-pipe-space-left-v3,
.error-layer-pipe-space-top-v3{
background: #7f8572;
}
.error-layer-pipe-space-left-v4,
.error-layer-pipe-space-top-v2{
background: #dbbb9e;
}
.error-layer-pipe-space-left-v5,
.error-layer-pipe-space-top-v1{
background: #7f8572;
}
.error,
.error-layer-area-inside-paper-body-area-ui{
overflow: auto;
}
.error,
.error-layer-area-inside-paper-top,
.error-layer-area-inside-paper-top1{
margin: auto;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-line,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother1,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother3,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother4,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father1,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father3,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father31,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father41{
border: 0 solid #e75038;
}
.error{
width: 100%;
min-width: 100px;
max-width: 1000px;
height: 500px;
background: #512721;
}
.error-layer{
top: 0;
left: 0;
}
.error-layer:nth-child(1){
flex-wrap: wrap;
flex-direction: column;
}
.error-layer-row{
height: 140px;
overflow: hidden;
}
.error-layer-row-box{
min-width: 90px;
max-width: 120px;
padding: 0 40px;
}
.error-layer-row-box-area-brik{
height: 20px;
}
.error-layer-row-box-area-brik .error-layer-row-box-brik{
width: calc(100% - 30px);
height: 100%;
background: #88362a;
}
.error-layer-row-box-area-brik:nth-child(2n) .error-layer-row-box-brik{
background: #bb5040;
}
.error-layer:nth-child(2){
justify-content: flex-end;
}
.error-layer-pipes{
width: calc(100% - 20px);
}
.error-layer-pipe-space-left{
width: 16px;
}
.error-layer-pipe-space-left-v1{
width: 2px;
}
.error-layer-pipe-space-left-v2{
width: 3px;
}
.error-layer-pipe-space-left-v3{
width: 5px;
}
.error-layer-pipe-space-left-v4{
width: 3px;
}
.error-layer-pipe-space-left-v5{
width: 3px;
}
.error-layer-pipe-space-top{
width: calc(100% - 16px);
height: 26px;
margin-top: 20px;
}
.error-layer-pipe-space-top-left{
width: 20px;
}
.error-layer-pipe-space-top-left .error-layer-pipe-space-top-v1{
height: 5px;
}
.error-layer-pipe-space-top-left .error-layer-pipe-space-top-v2{
height: 5px;
}
.error-layer-pipe-space-top-left .error-layer-pipe-space-top-v3{
height: 6px;
}
.error-layer-pipe-space-top-left .error-layer-pipe-space-top-v4{
height: 5px;
}
.error-layer-pipe-space-top-left .error-layer-pipe-space-top-v5{
height: 5px;
}
.error-layer-pipe-space-top-right{
width: calc(100% - 20px);
height: 16px;
}
.error-layer-pipe-space-top-right .error-layer-pipe-space-top-v1{
height: 2px;
}
.error-layer-pipe-space-top-right .error-layer-pipe-space-top-v2{
height: 3px;
}
.error-layer-pipe-space-top-right .error-layer-pipe-space-top-v3{
height: 5px;
}
.error-layer-pipe-space-top-right .error-layer-pipe-space-top-v4{
height: 3px;
}
.error-layer-pipe-space-top-right .error-layer-pipe-space-top-v5{
height: 3px;
}
.error-layer:nth-child(3){}
.error-layer-area{}
.error-layer-area-inside{
width: calc(100% - 20px);
height: calc(100% - 20px);
padding: 10px;
}
.error-layer-area-inside:nth-child(1){}
.error-layer-area-inside-paper{
width: 100%;
min-width: 100px;
max-width: 300px;
height: calc(100% - 100px);
}
.error-layer-area-inside-paper-top{
width: 100px;
height: 50px;
}
.error-layer-area-inside-paper-top1,
.error-layer-area-inside-paper-top2{
border: 2px solid transparent;
border-top-color: #d4d6cf;
border-left-color: #5f6050;
border-right-color: #d4d6cf;
border-bottom-color: #616251;
}
.error-layer-area-inside-paper-top1{
width: 25px;
height: 25px;
background: #7f8673;
border-radius: 5px;
z-index: 1;
}
.error-layer-area-inside-paper-top1-circle{
width: 15px;
height: 15px;
background: white;
border-radius: 50%;
transform: rotate(-60deg);
border: 1px solid transparent;
border-top-color: #d4d6cf;
border-left-color: #d4d6cf;
border-right-color: #423d2e;
border-bottom-color: #423d2e;
}
.error-layer-area-inside-paper-top2{
width: calc(100% - 4px);
height: calc(100% - 20px);
background: #7f8673;
border: 2px solid transparent;
border-top-color: #d4d6cf;
border-left-color: #5f6050;
border-right-color: #d4d6cf;
border-bottom-color: #616251;
margin-top: -17px;
}
.error-layer-area-inside-paper-top2-line{
height: 7px;
background: #616251;
margin-top: 10px;
}
.error-layer-area-inside-paper-body{
width: calc(100% - 30px - 4px);
height: calc(100% - 30px - 4px - 30px);
padding: 15px;
border: 2px solid #f79453;
background: #bd7850;
margin-top: -30px;
}
.error-layer-area-inside-paper-body:hover{
box-shadow: -5px 5px 0 0 rgba(0,0,0,.3);
}
.error-layer-area-inside-paper-body-area{
background: #f4efe5;
box-shadow: -5px 5px 0 rgba(0,0,0,0.3);
}
.error-layer-area-inside-paper-body-area-ui{
width: 100%;
height: 100%;
}
.error-layer-area-inside-paper-body-area-ui-err404{
width: 100%;
height: 100%;
position: relative;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer{
width: calc(100% - 40px);
height: calc(100% - 40px);
padding: 20px;
position: absolute;
top: 0;
left: 0;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-txt{
height: 100px;
font-size: 16px;
color: #e75038;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cables{
height: calc(100% - 100px);
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable{
width: calc(100% / 2 - 25px * 2);
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-line{
height: 5px;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn{
width: 100px;
height: 100px;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area{
width: calc(100% / 2 - 1px);
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother{}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother1,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father1{
width: 5px;
height: 10px;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-line,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother1,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother3,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father1,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father3,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father31,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father41{
border-top-width: 2px;
border-bottom-width: 2px;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother1,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother3,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father3,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father41{
border-left-width: 2px;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother1,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother3{
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father2{
width: 10px;
height: 30px;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother21,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father21{
width: 2px;
height: calc(100% - 10px);
background: #e75038;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother3,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father3{
width: 15px;
height: 40px;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-mother4{
width: 2px;
height: calc(100% - 4px);
border-radius: 4px;
border-width: 2px;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father{}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father1,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father2,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father3,
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father31{
border-right-width: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father3{}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father31{
width: 5px;
height: 2px;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father4{
width: 10px;
height: 100%;
}
.error-layer-area-inside-paper-body-area-ui-err404-layer-cable-conn-area-father41{
width: calc(100% - 2px);
height: 4px;
}