/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

body{background:#fff;color:#333;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.4;margin:0;padding:0;text-align:left}main{display:block}img{border:0}a{color:#1979c3;text-decoration:underline}a:hover{text-decoration:none}h1{font-size:30px;font-weight:700;margin:0 0 20px}h2{font-size:20px;font-weight:700;margin:0 0 10px}input[type=text],textarea{box-sizing:border-box;background:#fff;border:1px solid #c2c2c2;border-radius:1px;width:100%;font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:1.42857143;background-clip:padding-box;vertical-align:baseline}input[type=text]{height:32px;padding:0 9px}textarea{height:auto;padding:10px;resize:vertical}input[type=text]:focus,textarea:focus{box-shadow:0 0 3px 1px #68a8e0}button{background:#1979c3;border:none;border-radius:3px;color:#fff;cursor:pointer;display:inline-block;font-size:14px;font-weight:700;line-height:16px;padding:7px 15px;text-align:center}button:hover{background:#006bb4}p{margin:0 0 10px}ol,ul{list-style:none}.page-main{padding:20px 30px}.trace{background:#f1f1f1;min-height:250px;overflow:auto;width:100%}.message{border:1px solid;background-position:10px 11px;background-repeat:no-repeat;margin:20px 0;padding:10px 20px 10px 35px}.error{border-color:#b30000;background-color:#fae5e5;background-image:url(../images/i_msg-error.gif);color:#b30000}.success{border-color:#006400;background-color:#e5efe5;background-image:url(../images/i_msg-success.gif);color:#006400}.info{border-color:#6f4400;background-color:#fdf0d5;background-image:url(../images/i_msg-note.gif);color:#6f4400}.fieldset{border:0;margin:0 0 20px;padding:0}.fieldset .legend{box-sizing:border-box;float:left;font-size:20px;line-height:1.2;margin:0 0 25px;padding:0}.fieldset .legend+br{display:block;clear:both;height:0;overflow:hidden;visibility:hidden}.fieldset:last-child{margin-bottom:0}.fieldset:after{content:attr(data-hasrequired);color:#e02b27;display:block;font-size:12px;letter-spacing:normal;margin:10px 0 0;word-spacing:normal}.field{margin:0 0 20px}.label{font-weight:700}.label:after{content:"*";font-size:12px;color:#e02b27;margin:0 0 0 5px}
/*animations*/

/*animation on body background */
@keyframes no-route-background {
    0% {opacity: 0}
    47% {opacity: 0.08}
    70% {opacity: 0.04}
    90% {opacity: 0}
    100% {opacity: 0}
}

/*animation on error detailed content */
@keyframes error-detail-content-open {
    0% {opacity: 0; overflow: hidden;}
    50% {opacity: 0; overflow: hidden;}
    100% {opacity: 1; overflow: auto;}
}

/*scrollbar styling */
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    /*CHANGE VALUE: change color with value of the client */
    box-shadow: inset 0 0 2px #D61F26;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    /*CHANGE VALUE: change color with value of the client */
    background: #D61F26;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    /*CHANGE VALUE: change color with value of the client */
    background: #0073B1;
}

body {
    overflow: hidden;
    position: relative;
    min-height: 100vh;
}

/*basic background on body*/
body:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 3000;
}
/*animated background on body*/
body:after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
    opacity: 0;
    animation: no-route-background;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    z-index: 3010;
}
body .page-main {
    max-width: 100%;
    padding: 0;
    z-index: 3100;
    overflow: auto;
    position: fixed;
    inset: 0;
}
.error-wrapper {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.error-header {
    margin-top: 60px;
    margin-bottom: 60px;
}
.error-header svg {
    height: 90px;
    width: auto;
}
.maintenance-icon {
    position: relative;
    height: 150px;
    margin-bottom: 60px;
}
.maintenance-icon svg {
    height: 150px;
    width: auto;
}
.error-content {
    margin-bottom: 30px;
}
.error-content p {
    font-size: 22px;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    /*TODO: change color with value of client */
    color: #32363D;
}
.error-content p.small {
    font-size: 22px;
    margin-top: 0;
}
.error-content h1 {
    font-size: 50px;
    /*CHANGE VALUE: change color with value of the client */
    color: #0073B1;
    font-weight: 400;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}
.error-content h2 {
    font-size: 100px;
    /*CHANGE VALUE: change color with value of the client */
    color: #0073B1;
    font-weight: 400;
}
.error-content h3 {
    font-size: 30px;
    margin: 0;
    color: #818181;
}

.content01, .content02 {
    margin-bottom: 30px;
}

footer contact {
    font-size: 22px;
}

.error-header img.logo {
    height: 150px;
}

/*STYLING for report.phtml */

.toggle-detailed-error {
    display: none;
}

/*label */
.toggle-detailed-error+label {
    display: block;
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: middle;
    font-size: 20px;
    padding: 14px 17px;
    /*CHANGE VALUE: change color with value of the client */
    border: 1px solid #0073B1;
    background-color: #0073B1;
    color: #fff;
    text-decoration: none;
    transition: all .4s ease-in-out;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.4s ease-in-out;
    z-index: 30;
    position: absolute;
    left: calc(50% - 150px);
    top: 612px;
}
.toggle-detailed-error+label:hover {
    /*CHANGE VALUE: change color with value of the client */
    color: black;
}

.toggle-detailed-error+label:after {
    content: "Close message";
}

/*label when checked */
.toggle-detailed-error:not(:checked)+label:after {
    content: "Show message";
}

.background-button-label {
    opacity: 0;
    display: block;
    position: absolute;
    top: 174px;
    left: calc(50% - 35%);
    width: 70%;
    padding: 264px 0;
    /*CHANGE VALUE: change color with value of the client */
    background-color: #fff;
    z-index: 10;
    /*CHANGE VALUE: change color with value of the client */
    box-shadow:  0 0 0 100vw rgb(0 0 0 / 0.7);
    border-radius: 15px;
    transition: all 0.4s ease-out;
    transition-delay: .1s;
}

.toggle-detailed-error:checked~.background-button-label {
    opacity: 1;
    transition: all .3s ease-out;
}

/*error message when checked */
.toggle-detailed-error:checked~.error-detail-content {
    opacity: 1;
    animation: error-detail-content-open;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

/*error message */
.error-detail-content {
    opacity: 0;
    position: absolute;
    left: calc(50% - 25%);
    top: 188px;
    z-index: 20;
    padding: 30px;
    height: 335px;
    overflow: hidden;
    width: calc(50% - 60px);
    margin-left: auto;
    margin-right: auto;
}
.error-detail-content p {
    max-width: 100%;
    font-size: 16px;
    word-break: break-all;
}
button.action.primary {
    /*CHANGE VALUE: change color with value of the client */
    background: #0073B1;
    color: #fff;
    margin-bottom: 15px;
}
button.action.primary:hover {
    /*CHANGE VALUE: change color with value of the client */
    background: #0073B1;
    color: black;
}

@media only screen and (max-width: 1400px) {
    .error-detail-content {
        left: calc(50% - 35%);
        width: calc(70% - 70px);
    }
}

@media only screen and (max-width: 1024px) {
    .error-wrapper {
        max-width: 768px;
    }
    .error-header {
        margin-top: 60px;
        margin-bottom: 60px;
    }
    .error-header > svg {
        height: 60px;
    }
    .maintenance-icon {
        height: 90px;
    }
    .maintenance-icon svg {
        height: 90px;
        width: 90px;
    }
    .error-content {
        margin-bottom: 30px;
    }
    .error-content p {
        max-width: 80%;
    }
    .error-content h1 {
        font-size: 40px;
    }
    .error-content h2 {
        font-size: 100px;
    }
    .error-detail-content {
        left: 30px;
        width: calc(100vw - 130px);
        top: 44px;
        height: 486px;
    }

    /*styling for report.phtml  error */
    .background-button-label {
        top: 30px;
        padding: 335px 0;
        width: calc(100vw - 60px);
        left: 30px;
    }
}

@media only screen and (max-width: 768px) {
    .error-wrapper {
        max-width: 100%;
    }
    .error-header {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .maintenance-icon {
        height: 60px;
        margin-bottom: 30px;
    }
    .maintenance-icon svg {
        height: 60px;
        width: 60px;
    }
    .error-content {
        padding-left: 30px;
        padding-right: 30px
    }
    .error-content p {
        font-size: 18px;
        max-width: 100%;
    }
    .error-detail-content p {
        font-size: 14px;

    }
    .error-content h1 {
        font-size: 32px;
        max-width: 100%;
    }
    .error-content h2 {
        font-size: 90px;
    }

    .error-detail-content {
        top: 34px;
        height: 399px;
    }

    /*styling for report.phtml  error */
    .background-button-label {
        top: 15px;
        padding: 287px 0;
        width: calc(100vw - 30px);
        left: 15px;
    }

    .toggle-detailed-error+label {
        width: 200px;
        left: calc(50% - 100px);
        top: 516px;
        padding: 10px 17px;
    }

    .error-header img.logo {
        height: 120px;
    }
}

@media only screen and (max-width: 640px) {
    .error-content h3 {
        font-size: 24px;
    }
    .error-content p.small {
        font-size: 16px;
    }
    .error-content h2 {
        font-size: 60px;
    }
    .error-header img.logo {
        height: 60px;
    }
    footer h3 {
        margin-bottom: 0;
    }
    footer contact a {
        font-size: 12px;
    }
    footer {
        display: flex;
        flex-direction: column;
        row-gap: 5px;
    }
}

@media screen and (max-height: 500px) {
    .error-wrapper {
        max-width: 100%;
    }
    .error-header {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .error-header svg {
        height: 60px;
    }

    .maintenance-icon {
        height: 60px;
        margin-bottom: 15px;
    }
    .maintenance-icon svg {
        height: 60px;
        width: 60px;
    }
    .error-content {
        padding-left: 30px;
        padding-right: 30px
    }
    .error-content p {
        font-size: 18px;
        max-width: 100%;
    }
    .error-content h1 {
        font-size: 32px;
        max-width: 100%;
        margin: 0 0 15px;
    }
    .error-content p.small {
        margin-top: 15px;
    }
    .error-content h2 {
        font-size: 90px;
    }

    .error-detail-content {
        top: 43px;
        height: 160px;
    }

    /*styling for report.phtml  error */
    .background-button-label {
        top: 30px;
        padding: 162px 0;
        width: calc(100vw - 60px);
        left: 30px;
    }

    .toggle-detailed-error+label {
        width: 200px;
        left: calc(50% - 100px);
        top: 277px;
        padding: 10px 17px;
    }
}