@keyframes spin {
    0% {
        transform : rotate(0deg);
    }
    100% {
        transform : rotate(360deg);
    }
}

html {
    height                   : 100%;
    font-family              : 'Open Sans', 'OpenSans', Arial, sans-serif;
    line-height              : 1.15;
    -ms-text-size-adjust     : 100%;
    -webkit-text-size-adjust : 100%;
}

body {
    margin           : 0;
    background-color : #111111;
}

* {
    box-sizing : border-box;
}

/*noinspection CssUnknownProperty,CssInvalidPropertyValue*/
a {
    background-color             : transparent;
    -webkit-text-decoration-skip : objects;
    text-decoration-skip         : objects;
}

img {
    border-style : none;
}

button, input, optgroup, select, textarea {
    margin : 0;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style : none;
    padding      : 0;
}

textarea {
    overflow : auto;
}

[type="search"] {
    -webkit-appearance : textfield;
    outline-offset     : -2px;
}

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
    -webkit-appearance : none;
}

*[rrequired] {
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    user-select         : none;
}

::-webkit-file-upload-button {
    -webkit-appearance : button;
    font               : inherit;
}

.loader {
    border        : 2px solid #f3f3f3;
    border-top    : 2px solid #3498db;
    border-radius : 50%;
    margin        : 0 1rem;
    width         : 20px;
    height        : 20px;
    display       : inline-block;
    animation     : spin 1s linear infinite;
}

.dialog-container {
    z-index          : 20;
    position         : absolute;
    align-items      : center;
    text-align       : center;
    height           : 100vh;
    width            : 100vw;
    display          : -ms-flexbox;
    display          : flex;
    -ms-flex-pack    : center;
    -ms-flex-align   : center;
    justify-content  : center;
    background-color : #000a;
}

.dialog {
    padding        : 8px;
    background     : #ffffff;
    box-shadow     : 0 8px 20px 0 rgba(0, 0, 0, 0.15);
    border-radius  : 3px;
    align-items    : center;
    vertical-align : middle;
    min-height     : 50vh;
    min-width      : 27vw;
}

.dialog > div.qr {
    height      : calc(100% - 3rem);
    padding-top : 0.320rem;
}

.dialog > div.qr span {
    display : block;
}

.dialog > div.qr > img {
    width     : 100%;
    max-width : 23rem;
    /*max-width: 13.20rem;*/
    /*max-height: calc(100% - 2rem);*/
}

.dialog > input {
    height    : 3rem;
    max-width : 14rem;
    width     : 100%;
    /*width: 13.20rem;*/
}

.items {
    position      : absolute;
    top           : 16px;
    right         : 16px;
    height        : 50%;
    min-height    : 3rem;
    max-height    : 5rem;
    display       : -webkit-inline-flex;
    display       : -ms-inline-flexbox;
    display       : inline-flex;
    background    : #616161;
    align-items   : center;
    text-align    : center;
    box-shadow    : 0 8px 20px 0 rgba(0, 0, 0, 0.15);
    border-radius : 3px;
}

.items * {
    height     : 100%;
    transition : all .5s ease-out;
}

.items > a:hover {
    background-color : rgba(46, 160, 255, 0.5);
}

.items > a:first-child {
    /*filter: invert(45%) sepia(96%) saturate(1502%) hue-rotate(184deg) brightness(97%) contrast(97%);*/
    border-radius : 3px 0 0 3px;
}

.items > a:first-child > img {
    filter : brightness(100) contrast(100);
}

.items > a:last-child {
    border-radius : 0 3px 3px 0;
}

.items > a:not(:last-child) {
    border-right : 1px solid #607d8b80;
}

body::before {
    content                 : ' ';
    z-index                 : -100;
    display                 : block;
    position                : fixed;
    left                    : 0;
    top                     : 0;
    opacity                 : 0.220;
    width                   : 100%;
    height                  : 100%;
    background              : url('../imgs/background.jpg') no-repeat center bottom;
    -o-background-size      : cover;
    -ms-background-size     : cover;
    -moz-background-size    : cover;
    -webkit-background-size : cover;
    background-size         : cover;
}

.results {
    margin-top : 2rem;
}

.results > div {
    box-shadow              : 0 1px 6px 0 rgba(0, 0, 0, 0.420);
    padding                 : 10px;
    width                   : 100%;
    font-weight             : 600;
    color                   : #f3f3f3;
    border-top-left-radius  : 3px;
    border-top-right-radius : 3px;
    background-color        : #2196f3;
    overflow                : hidden;
    -ms-word-wrap           : break-word;
    word-wrap               : break-word;
}

.results > table {
    background-color           : #ffffff;
    border-bottom-left-radius  : 3px;
    border-bottom-right-radius : 3px;
}

.results table th {
    font-size     : 1.1320em;
    border-bottom : 2px dashed #347694;
}

.results table a {
    color : #3498db;
}

.results table a:hover {
    color : #2f2f2f;
}

.results span > a {
    color : #2f2f2f;
}

.results span > a:hover {
    color : #ffffff;
}

.results table {
    border-spacing : 0;
    padding        : 8px 20px 20px;
    width          : 100%;
}

.results table tr:nth-child(2) > td {
    padding-top : 8px;
}

.results table td:nth-child(0n+2), .results table th:last-child {
    padding-left : 10px;
}

.results table td:nth-child(0n+1) {
    width        : 25%;
    border-right : 2px dot-dash #347694;
}

.awaisome-form {
    min-height              : 100vh;
    padding                 : 15px;
    display                 : -o-flex;
    display                 : -ms-flex;
    display                 : -moz-flex;
    display                 : -ms-flexbox;
    display                 : -webkit-flex;
    display                 : flex;
    -webkit-align-items     : center;
    align-items             : center;
    -webkit-justify-content : center;
    justify-content         : center;

    -webkit-flex-direction  : column;
    -ms-flex-direction      : column;
    flex-direction          : column;
}

.awaisome-form > img {
    width         : 20vw;
    min-width     : 70px;
    min-height    : 70px;
    max-height    : 180px;
    max-width     : 180px;
    border-radius : 8px;
    cursor        : pointer;
    /* margin-bottom : 2.25rem; */
}

.awaisome-form > h1 {
    color         : white;
    margin-top    : 0;
    margin-bottom : 0;
}

.awaisome-form > p {
    margin-top    : 0.25rem;
    margin-bottom : 2.25rem;
    font-weight   : bold;
    color         : whitesmoke;
}

.awaisome-form form {
    width     : 100%;
    max-width : 790px;
}

.inner-form {
    width           : 100%;
    justify-content : space-between;
    align-items     : center;
    box-shadow      : 0 8px 20px 0 rgba(0, 0, 0, 0.15);
    border-radius   : 3px;
}

.awaisome-form .inner-form #info-text > span {
    vertical-align : middle;
    text-align     : center;
    margin         : auto;
}

.awaisome-form .inner-form #info-text {
    margin         : 5px 0 auto;
    vertical-align : middle;
    text-align     : center;
    padding        : 0.620rem;
    border-radius  : 3px;
    font-size      : 1.2rem;
    font-weight    : 500;
    color          : #ffffff;
}

.awaisome-form .inner-form .loading-text {
    background-color : #2196f3;
}

.awaisome-form .inner-form .success-text {
    background-color : #469a4a;
}

.awaisome-form .inner-form .error-text {
    background-color : #dc4034;
}

.awaisome-form .inner-form .flex {
    display : -ms-flexbox;
    display : flex;
}

.awaisome-form .inner-form .flex .input-field input {
    height     : 100%;
    background : transparent;
    border     : 0;
    display    : block;
    width      : 100%;
    padding    : 10px 32px;
    font-size  : 16px;
    color      : #555555;
}

.awaisome-form .inner-form .flex .input-field input::placeholder {
    color     : #888888;
    font-size : 16px;
}

.awaisome-form .inner-form .flex .input-field input::-moz-placeholder {
    color     : #888888;
    font-size : 16px;
}

.awaisome-form .inner-form .flex .input-field input::-webkit-input-placeholder {
    color     : #888888;
    font-size : 16px;
}

.awaisome-form .inner-form .flex .input-field input:hover, .awaisome-form .inner-form .flex .input-field input:focus {
    box-shadow   : none;
    outline      : 0;
    border-color : #ffffff;
}

.awaisome-form .inner-form .flex .input-field.first-wrap {
    width                             : 200px;
    background-color                  : #ffffff;
    border-top-left-radius            : 3px;
    border-bottom-left-radius         : 3px;
    -moz-border-radius-topleft        : 3px;
    -moz-border-radius-bottomleft     : 3px;
    -webkit-border-top-left-radius    : 3px;
    -webkit-border-bottom-left-radius : 3px;
    border-right                      : 1px solid rgba(0, 0, 0, 0.1);
    transition                        : all .5s ease-out;
}

.awaisome-form .inner-form .flex .input-field.first-wrap:hover {
    /*background-color: #ffffff;*/
    opacity : 0.8;
}

.awaisome-form .inner-form .flex .input-field.second-wrap {
    flex-grow        : 1;
    background-color : #ffffff;
}

.awaisome-form .inner-form .flex .input-field.third-wrap {
    width : 74px;
}

.awaisome-form .inner-form .flex .input-field.third-wrap .btn-search {
    height                             : 68px;
    width                              : 100%;
    color                              : #ffffff;
    border                             : 0;
    cursor                             : pointer;
    white-space                        : nowrap;
    background                         : #55646d;
    transition                         : all .5s ease-out;
    border-top-right-radius            : 3px;
    border-bottom-right-radius         : 3px;
    -moz-border-radius-topright        : 3px;
    -moz-border-radius-bottomright     : 3px;
    -webkit-border-top-right-radius    : 3px;
    -webkit-border-bottom-right-radius : 3px;
}

.awaisome-form .inner-form .flex .input-field.third-wrap .btn-search svg {
    width : 24px;
}

.awaisome-form .inner-form .flex .input-field.third-wrap .btn-search:hover {
    background : #363f44;
}

.awaisome-form .inner-form .flex .input-field.third-wrap .btn-search:focus {
    outline    : 0;
    box-shadow : none;
}

#uploadingBtn {
    width          : 190px;
    display        : table-cell;
    height         : 44px;
    border         : 1px dashed #bbbbbb;
    text-align     : center;
    vertical-align : middle;
}

@media screen and (max-width : 767px) {
    #uploadingBtn {
        width : 760px;
    }

    .awaisome-form .inner-form .flex .input-field {
        /*margin-bottom: 20px;*/
        /*border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
    }

    .awaisome-form .inner-form .flex .input-field input {
        padding : 10px 15px;
    }

    .awaisome-form .inner-form .flex .input-field.first-wrap {
        width : 300px;
        /*border-right: 0;*/
    }

    .awaisome-form .inner-form .flex .input-field.second-wrap {
        width : 100%;
        /*margin-bottom: 30px;*/
    }

    .awaisome-form .inner-form .flex .input-field.second-wrap input {
        /*border: 1px solid rgba(255, 255, 255, 0.3);*/
    }

    .awaisome-form .inner-form .flex .input-field.third-wrap {
        width : 150px;
    }
}