html,
body {
    padding: 0;
    margin: 0;
    background: transparent;
}

body {
    font-family: Roboto-Regular, sans-serif;
    font-size: 16px;
    line-height: 21px;
    font-weight: normal;
    color: #01263f;
}

h2 {
    line-height: 30px;
    font-size: 24px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 15px;
}

/* Call fonts */

@font-face {
    font-family: Roboto-Light;
    src: url(asset/fonts/Roboto-Light.ttf) format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: Roboto-Thin;
    src: url(asset/fonts/Roboto-Thin.ttf) format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: Roboto-Regular;
    src: url(asset/fonts/Roboto-Regular.ttf) format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: Roboto-Medium;
    src: url(asset/fonts/Roboto-Medium.ttf) format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: Roboto-Bold;
    src: url(asset/fonts/Roboto-Bold.ttf) format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: Roboto-Black;
    src: url(asset/fonts/Roboto-Black.ttf) format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: Roboto-Italic;
    src: url(asset/fonts/Roboto-Italic.ttf) format('truetype');
    font-weight: normal;
}

/* Form Styling */
form {
    margin-bottom: 50px;
}

.snapshort-wrapper,
.timezone-wrapper {
    display: flex;
    flex-direction: column;
    width: 48.5%;
}

.selection-wrapper {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 3%;
    row-gap:15px;
}

.group-wrapper {
    margin-top: 15px;
    display: flex;
    align-items: flex-start;
}

select,
input[type="checkbox"] {
    padding: 12px;
    font-size: 16px;
    border: none;
    border-bottom: 1px solid #0a3e86;
    border-radius: 0;
    margin-bottom: 10px;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230a3e86%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    cursor: pointer;
}

input[type="checkbox"] {
    width: 1.05em;
    height: 1.05rem;
    accent-color: #df3918;
    bottom: 1px;
    left: 2px;
    position: relative;
}

input[type="submit"] {
    background-color: #0a3e86;
    color: #fff;
    padding: 9px 29px;
    text-transform: uppercase;
    border-radius: 3px;
    border: 1px solid #0a3e86;
    font-size: 16px;
}

input[type="submit"]:hover {
    background-color: #df3918;
    border: 1px solid #df3918;
}

select:focus {
    background-color: #0a3e86;
    color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}

.snapshort-wrapper label,
.timezone-wrapper label,
.group-wrapper label {
    margin-bottom: 10px;
    color: #0a3e86;
    font-family: Roboto-Medium, sans-serif;
}

.submit-btn-wrapper {
    margin-top: 15px;
}


/* Table Styling */
table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-top: 25px;
}

tbody tr th {
    background-color: #e4eef5;
    color: #093e86;
    font-family: Roboto-Medium, sans-serif;
    font-weight: normal;
    text-align: right;
    font-size: 14px;
    padding: 12px 20px;
    border-bottom: none;
    overflow: hidden;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}


tbody tr th:first-child {
    text-align: left;
    width: 0%;
    padding: 0;
}

tbody tr th:nth-child(2) {
    width: 19%;
}

tbody tr th:nth-child(3) {
    width: 43%;
}

tbody tr th:nth-child(4) {
    width: 32%;
}

tbody tr {
    position: relative;
    z-index: 12;
    border-bottom: 1.2px solid #0a3e86;
}

tbody tr:first-child {
    border-bottom: 1.5px solid #b0bdd0;
}

tbody tr::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 90%;
    opacity: 0.75;
    background: rgb(255, 255, 255);
    right: 0;
    z-index: -1;
    transition: 0.2s all ease;
}

tbody tr td {
    text-align: right;
    border-bottom: 5px solid transparent;
    padding: 15px 20px;
}

tbody tr:hover::before {
    height: 0;
    transition: 0.2s all ease;
}


.symbol {
    text-align: left;
    font-weight: normal;
    font-family: Roboto-Medium, sans-serif;
    border: none;
    background-color: transparent;
    font-size: 18px;
    padding: 30px 15px 10px 15px;
    position: relative;
    color: #fff;
    white-space: nowrap;
}

.symbol::before {
    content: 'Symbol: ';
    font-size: 12px;

}

.symbol::after {
    content: '';
    background: #0a3e86;
    position: absolute;
    display: block;
    width: 180px;
    height: 70%;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 8px 8px 0 0;
    /* border-bottom: 4px solid #fff; */
}

tbody tr th:first-child {
    color: #e4eef5;
}

tbody tr:nth-child(even) {
    background-color: transparent;
}

/* Responsive */
@media(max-width:640px) {

    /* Form */
    .snapshort-wrapper,
    .timezone-wrapper {
        width: 100%;
    }

    tbody tr th,
    tbody tr td {
        padding:15px;
    }

    tbody tr th:nth-child(2) {
        width: 17%;
    }
    
    tbody tr th:nth-child(3) {
        width: 56%;
    }
    
    tbody tr th:nth-child(4) {
        width: 27%;
    }
}

@media(max-width:340px) {
    tbody tr td {
        padding:10px;
    }

}