@import './colors';
@import 'variables';
@import 'mixins';

.error-tile {
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: $white;
    border-radius: 5px;
    display: block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    .content-column {
        width: 48%;
        padding: 50px 0;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }

    .error-header-code {
        font-size: 9rem;
        font-weight: 800;
        color: $primary-brand;
        text-align: left;
    }

    .error-header-string {
        font-size: 3rem;
        font-weight: 800;
        color: $primary-brand;
        text-align: left;
        margin: 10px 0;
    }

    .error-img {
        max-width: 220px;
        height: 171px;
        display: block;
        width: 70%;
        margin: 10px auto 0 auto;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjMwLjggMTc5LjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIzMC44IDE3OS4xOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzAwQUVGRjt9PC9zdHlsZT48ZyBpZD0iXzQwNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjM4MSAzNjEpIj48ZyBpZD0iTGF5ZXJfMV8xXyI+PHBhdGggaWQ9IlBhdGhfNjI1IiBjbGFzcz0ic3QwIiBkPSJNLTIxNjcuMi0zNTdILTIzNjRjLTYuMSwwLTExLDQuOS0xMSwxMXYxMjQuNmMwLDYuMSw0LjksMTEsMTEsMTFoODAuOGMtMy44LDcuNC0xMC41LDEyLjUtMTYuNSwxMi41aC0zLjVjLTIuMSwwLjEtMy44LDEuOS0zLjcsNHY0Yy0wLjEsMi4xLDEuNiwzLjksMy43LDRoNzUuMmMyLjEtMC4xLDMuOC0xLjksMy43LTR2LTRjMC4xLTIuMS0xLjYtMy45LTMuNy00aC0zLjRjLTYuOCwwLTEzLjItNC44LTE2LjktMTIuNWg4MS4xYzYuMSwwLDExLTQuOSwxMS0xMVYtMzQ2Qy0yMTU2LjItMzUyLjEtMjE2MS4xLTM1Ny0yMTY3LjItMzU3Qy0yMTY3LjItMzU3LTIxNjcuMi0zNTctMjE2Ny4yLTM1N3ogTS0yMjMxLjUtMTkzLjloMy4xdjRoLTc0LjZ2LTRoMy4yYzguMSwwLDE2LjYtNi43LDIwLjktMTYuNWgyNkMtMjI0OC42LTIwMC4zLTIyNDAuNC0xOTMuOS0yMjMxLjUtMTkzLjl6IE0tMjE2MC4yLTIyMS40YzAsMy45LTMuMSw3LTcsN0gtMjM2NGMtMy45LDAtNy0zLjEtNy03Vi0zNDZjMC0zLjksMy4xLTcsNy03aDE5Ni44YzMuOSwwLDcsMy4xLDcsN1YtMjIxLjR6Ii8+PHBhdGggaWQ9IlBhdGhfNjI2IiBjbGFzcz0ic3QwIiBkPSJNLTIxNzYuNC0zNDguMmgtMTc4LjRjLTYuMSwwLTExLDQuOS0xMSwxMXY5My4yYzAsNi4xLDQuOSwxMSwxMSwxMWgxNzguNGM2LjEsMCwxMS00LjksMTEtMTF2LTkzLjJDLTIxNjUuNC0zNDMuMi0yMTcwLjMtMzQ4LjItMjE3Ni40LTM0OC4yeiBNLTIzMjQuNC0yNjkuOWMtMTEuNCwwLTIwLjctOS4zLTIwLjctMjAuN2MwLTExLjQsOS4zLTIwLjcsMjAuNy0yMC43YzExLjQsMCwyMC43LDkuMywyMC43LDIwLjdDLTIzMDMuOC0yNzkuMi0yMzEzLTI2OS45LTIzMjQuNC0yNjkuOUwtMjMyNC40LTI2OS45eiBNLTIxNjkuNC0yNDRjMCwzLjktMy4xLDctNyw3bDAsMEgtMjI4OXYtMTA3LjJoMTEyLjZjMy45LDAsNywzLjEsNyw3Vi0yNDR6Ii8+PHBhdGggaWQ9IlBhdGhfNjI3IiBjbGFzcz0ic3QwIiBkPSJNLTIzMTUtMjk3LjdsLTIuMy0yLjNjLTAuNi0wLjYtMS41LTAuNi0yLjEsMGwtNC45LDVsLTUtNWMtMC42LTAuNi0xLjUtMC42LTIuMSwwbC0yLjMsMi4zYy0wLjYsMC42LTAuNiwxLjUsMCwyLjFjMCwwLDAsMCwwLDBsNSw1bC01LDVjLTAuNiwwLjYtMC42LDEuNSwwLDIuMWMwLDAsMCwwLDAsMGwyLjMsMi4zYzAuNiwwLjYsMS41LDAuNiwyLjEsMGw1LTVsNC45LDVjMC42LDAuNiwxLjUsMC42LDIuMSwwbDIuMy0yLjNjMC42LTAuNiwwLjYtMS41LDAtMi4xYzAsMCwwLDAsMCwwbC01LTVsNS01Qy0yMzE0LjUtMjk2LjEtMjMxNC40LTI5Ny4xLTIzMTUtMjk3Ljd6Ii8+PHBhdGggaWQ9IlBhdGhfNjI4IiBjbGFzcz0ic3QwIiBkPSJNLTIyNzMuOC0zMjIuM2gyMS45YzEuMSwwLDItMC45LDItMmMwLTEuMS0wLjktMi0yLTJoLTIxLjljLTEuMSwwLTIsMC45LTIsMkMtMjI3NS44LTMyMy4yLTIyNzQuOS0zMjIuMy0yMjczLjgtMzIyLjN6Ii8+PHBhdGggaWQ9IlBhdGhfNjI5IiBjbGFzcz0ic3QwIiBkPSJNLTIxODguOC0zMjYuM2gtNDUuMmMtMS4xLDAtMiwwLjktMiwyYzAsMS4xLDAuOSwyLDIsMmg0NS4yYzEuMSwwLDItMC45LDItMkMtMjE4Ni44LTMyNS40LTIxODcuNy0zMjYuMy0yMTg4LjgtMzI2LjNMLTIxODguOC0zMjYuM3oiLz48cGF0aCBpZD0iUGF0aF82MzAiIGNsYXNzPSJzdDAiIGQ9Ik0tMjI3My44LTMwNi41aDc0LjljMS4xLDAsMi0wLjksMi0yYzAtMS4xLTAuOS0yLTItMmgtNzQuOWMtMS4xLDAtMiwwLjktMiwyQy0yMjc1LjgtMzA3LjQtMjI3NC45LTMwNi41LTIyNzMuOC0zMDYuNXoiLz48cGF0aCBpZD0iUGF0aF82MzEiIGNsYXNzPSJzdDAiIGQ9Ik0tMjE5Mi44LTI5NS41aC04MC45Yy0xLjEsMC0yLDAuOS0yLDJjMCwxLjEsMC45LDIsMiwyaDgwLjljMS4xLDAsMi0wLjksMi0yQy0yMTkwLjgtMjk0LjYtMjE5MS43LTI5NS41LTIxOTIuOC0yOTUuNXoiLz48cGF0aCBpZD0iUGF0aF82MzIiIGNsYXNzPSJzdDAiIGQ9Ik0tMjI3My44LTI3NS41aDQwLjljMS4xLDAsMi0wLjksMi0yYzAtMS4xLTAuOS0yLTItMmgtNDAuOWMtMS4xLDAtMiwwLjktMiwyQy0yMjc1LjgtMjc2LjQtMjI3NC45LTI3NS41LTIyNzMuOC0yNzUuNXoiLz48cGF0aCBpZD0iUGF0aF82MzMiIGNsYXNzPSJzdDAiIGQ9Ik0tMjE5OC44LTI2NC41aC03NC45Yy0xLjEsMC0yLDAuOS0yLDJjMCwxLjEsMC45LDIsMiwyaDc0LjljMS4xLDAsMi0wLjksMi0yQy0yMTk2LjgtMjYzLjYtMjE5Ny43LTI2NC41LTIxOTguOC0yNjQuNXoiLz48L2c+PC9nPjwvc3ZnPg==');
    }

    .access-error-img {
        max-width: 220px;
        height: 171px;
        display: block;
        width: 70%;
        margin: 10px auto 0 auto;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyMzAuOCAxNzkuMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjMwLjggMTc5LjE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMDBBRUZGO30KPC9zdHlsZT4KPGcgaWQ9Il80MDQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzODEgMzYxKSI+Cgk8ZyBpZD0iTGF5ZXJfMV8xXyI+CgkJPHBhdGggaWQ9IlBhdGhfNjI1IiBjbGFzcz0ic3QwIiBkPSJNLTIxNjcuMi0zNTdILTIzNjRjLTYuMSwwLTExLDQuOS0xMSwxMXYxMjQuNmMwLDYuMSw0LjksMTEsMTEsMTFoODAuOAoJCQljLTMuOCw3LjQtMTAuNSwxMi41LTE2LjUsMTIuNWgtMy41Yy0yLjEsMC4xLTMuOCwxLjktMy43LDR2NGMtMC4xLDIuMSwxLjYsMy45LDMuNyw0aDc1LjJjMi4xLTAuMSwzLjgtMS45LDMuNy00di00CgkJCWMwLjEtMi4xLTEuNi0zLjktMy43LTRoLTMuNGMtNi44LDAtMTMuMi00LjgtMTYuOS0xMi41aDgxLjFjNi4xLDAsMTEtNC45LDExLTExVi0zNDZDLTIxNTYuMi0zNTIuMS0yMTYxLjEtMzU3LTIxNjcuMi0zNTcKCQkJTC0yMTY3LjItMzU3eiBNLTIyMzEuNS0xOTMuOWgzLjF2NGgtNzQuNnYtNGgzLjJjOC4xLDAsMTYuNi02LjcsMjAuOS0xNi41aDI2Qy0yMjQ4LjYtMjAwLjMtMjI0MC40LTE5My45LTIyMzEuNS0xOTMuOXoKCQkJIE0tMjE2MC4yLTIyMS40YzAsMy45LTMuMSw3LTcsN0gtMjM2NGMtMy45LDAtNy0zLjEtNy03Vi0zNDZjMC0zLjksMy4xLTcsNy03aDE5Ni44YzMuOSwwLDcsMy4xLDcsN1YtMjIxLjR6Ii8+CgkJPHBhdGggaWQ9IlBhdGhfNjI4IiBjbGFzcz0ic3QwIiBkPSJNLTIyNzMuOC0zMjIuM2gyMS45YzEuMSwwLDItMC45LDItMnMtMC45LTItMi0yaC0yMS45Yy0xLjEsMC0yLDAuOS0yLDIKCQkJQy0yMjc1LjgtMzIzLjItMjI3NC45LTMyMi4zLTIyNzMuOC0zMjIuM3oiLz4KCQk8cGF0aCBpZD0iUGF0aF82MjkiIGNsYXNzPSJzdDAiIGQ9Ik0tMjE4OC44LTMyNi4zaC00NS4yYy0xLjEsMC0yLDAuOS0yLDJzMC45LDIsMiwyaDQ1LjJjMS4xLDAsMi0wLjksMi0yCgkJCVMtMjE4Ny43LTMyNi4zLTIxODguOC0zMjYuM0wtMjE4OC44LTMyNi4zeiIvPgoJCTxwYXRoIGlkPSJQYXRoXzYzMCIgY2xhc3M9InN0MCIgZD0iTS0yMjczLjgtMzA2LjVoNzQuOWMxLjEsMCwyLTAuOSwyLTJzLTAuOS0yLTItMmgtNzQuOWMtMS4xLDAtMiwwLjktMiwyCgkJCVMtMjI3NC45LTMwNi41LTIyNzMuOC0zMDYuNXoiLz4KCQk8cGF0aCBpZD0iUGF0aF82MzEiIGNsYXNzPSJzdDAiIGQ9Ik0tMjE5Mi44LTI5NS41aC04MC45Yy0xLjEsMC0yLDAuOS0yLDJzMC45LDIsMiwyaDgwLjljMS4xLDAsMi0wLjksMi0yCgkJCVMtMjE5MS43LTI5NS41LTIxOTIuOC0yOTUuNXoiLz4KCQk8cGF0aCBpZD0iUGF0aF82MzIiIGNsYXNzPSJzdDAiIGQ9Ik0tMjI3My44LTI3NS41aDQwLjljMS4xLDAsMi0wLjksMi0ycy0wLjktMi0yLTJoLTQwLjljLTEuMSwwLTIsMC45LTIsMgoJCQlTLTIyNzQuOS0yNzUuNS0yMjczLjgtMjc1LjV6Ii8+CgkJPHBhdGggaWQ9IlBhdGhfNjMzIiBjbGFzcz0ic3QwIiBkPSJNLTIxOTguOC0yNjQuNWgtNzQuOWMtMS4xLDAtMiwwLjktMiwyczAuOSwyLDIsMmg3NC45YzEuMSwwLDItMC45LDItMgoJCQlTLTIxOTcuNy0yNjQuNS0yMTk4LjgtMjY0LjV6Ii8+CgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTS0yMTc2LjQtMzQ4LjJoLTE3OC40Yy02LjEsMC0xMSw0LjktMTEsMTF2OTMuMmMwLDYuMSw0LjksMTEsMTEsMTFoMTc4LjRjNi4xLDAsMTEtNC45LDExLTExdi05My4yCgkJCUMtMjE2NS40LTM0My4yLTIxNzAuMy0zNDguMi0yMTc2LjQtMzQ4LjJ6IE0tMjMwNi0yNjkuNmMwLDIuNC0yLDQuNC00LjQsNC40aC0zMy4zYy0yLjQsMC00LjQtMi00LjQtNC40di0yMy44CgkJCWMwLTIuNCwyLTQuNCw0LjQtNC40aDAuNHYtNS43YzAtOS4xLDcuMy0xNi40LDE2LjQtMTYuNGM5LjEsMCwxNi40LDcuMywxNi40LDE2LjR2NS43aDAuMWMyLjQsMCw0LjQsMiw0LjQsNC40Vi0yNjkuNnoKCQkJIE0tMjE2OS40LTI0NGMwLDMuOS0zLjEsNy03LDdILTIyODl2LTEwNy4yaDExMi42YzMuOSwwLDcsMy4xLDcsN1YtMjQ0eiIvPgoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMjMyNC40LTI4MC41Yy0wLjQsMC4yLTAuNCwwLjUtMC40LDAuOWMwLDEuNywwLDMuNSwwLDUuMmMwLjEsMC43LTAuNCwxLjQtMSwxLjhjLTEuNSwwLjgtMy0wLjMtMy0xLjgKCQkJYzAtMS43LDAtMy41LDAtNS4yYzAtMC40LTAuMS0wLjYtMC40LTAuOGMtMS42LTEuMi0yLjEtMy4yLTEuMy00LjljMC44LTEuNywyLjYtMi43LDQuNC0yLjNjMiwwLjQsMy4zLDIsMy4zLDMuOQoJCQlDLTIzMjIuNy0yODIuNC0yMzIzLjMtMjgxLjItMjMyNC40LTI4MC41eiIvPgoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMjMxNy42LTI5Ny44aC0xOC41di01LjdjMC01LjEsNC4xLTkuMiw5LjItOS4yYzUuMSwwLDkuMiw0LjEsOS4yLDkuMlYtMjk3Ljh6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
    }

    .error-message {
        @include fontSize(20px);
        font-weight: 600;
        color: $primary-brand;
        line-height: 1.2;
        text-align: left;
    }

    .error-message-light {
        @include fontSize(19px);
        font-weight: 500;
        color: $primary-brand;
        line-height: 1.3;
        text-align: left;
    }

    hr {
        margin: 0;
    }

    .error-button {
        display: block;
        margin: 20px auto;
        padding: 0 20px;
        height: 40px;
        min-width: 215px;
        font-size: 15px;
        line-height: 40px;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        touch-action: manipulation;
        cursor: pointer;
        border-radius: 5px;
        font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        background-color: $green;
        color: $white;

        &:hover {
            background-color: shade($green, 10%);
        }
    }

    @include media-breakpoint-down(sm) {
        .content-column {
            width: 100%;
            padding: 0;
        }
        .error-img {
            display: none;
        }
        .error-header-string {
            text-align: center;
            padding-top: 20px;
        }
        .error-header-code {
            text-align: center;
            padding-top: 20px;
        }
        .error-message {
            text-align: center;
            padding: 0 30px 30px 30px;
        }
        .error-message-light {
            text-align: center;
            padding: 0 30px 30px 30px;
        }
    }
}