text/css style_01Aug22.css ( UTF-8 Unicode text )
@font-face {
    font-family  : 'Josefin Sans';
    font-style   : normal;
    font-weight  : 300;
    font-display : swap;
    src          : url(https://fonts.gstatic.com/s/josefinsans/v17/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_GbQbMlhLzTs.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family  : 'Josefin Sans';
    font-style   : normal;
    font-weight  : 300;
    font-display : swap;
    src          : url(https://fonts.gstatic.com/s/josefinsans/v17/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_GbQbMhhLzTs.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family  : 'Josefin Sans';
    font-style   : normal;
    font-weight  : 300;
    font-display : swap;
    src          : url(https://fonts.gstatic.com/s/josefinsans/v17/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_GbQbMZhLw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
body div,
caption,
cite,
code,
dd,
del,
dfn,
dl,
dt,
em,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
    margin        : 0;
    padding       : 0;
    border        : 0;
    outline       : 0;
    font-size     : 100%;
    vertical-align: baseline;
    background    : 0 0
}

article,
aside,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block
}

embed,
object {
    max-width: 100%
}

nav ol,
nav ul,
ol,
ul {
    list-style      : none;
    list-style-image: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

body {
    background                 : #1c1c1c;
    color                      : #fff;
    font-size                  : 18px;
    font-family                : 'Josefin Sans', sans-serif;
    -moz-backface-visibility   : hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility        : hidden;
    overflow-x                 : hidden;
    overflow-y                 : auto;
    -webkit-font-smoothing     : antialiased
}

a {
    margin        : 0;
    padding       : 0;
    font-size     : 100%;
    vertical-align: baseline;
    background    : 0 0;
    color         : silver
}

a:active,
a:focus,
a:hover {
    color          : inherit;
    outline        : 0;
    text-decoration: none
}

header {
    padding: 20px
}

header .logo {
    float    : left;
    max-width: 180px
}

.menu-icon {
    float: right
}

.circle {
    border       : 1px solid #2d88ff;
    border-radius: 50%;
    background   : 0 0;
    width        : 20px;
    height       : 20px;
    text-align   : center;
    line-height  : 20px;
    float        : left;
    margin       : 2px
}

.searchbox {
    margin: 20px 0
}

.has-search .form-control-feedback {
    position       : absolute;
    z-index        : 2;
    display        : block;
    width          : 50px;
    height         : 50px;
    background     : url(../images/search.png);
    background-size: cover;
    margin         : 5px
}

input#search {
    background   : 0 0;
    border       : 1px solid #2d88ff;
    border-radius: 15px;
    padding      : 30px 30px 30px 60px;
    font-size    : 28px;
    color        : #fff
}

input#search:focus {
    background-color: transparent;
    color           : #fff;
    border-color    : #5da1fa;
    outline         : 0;
    box-shadow      : 0 0 0 .1rem #5da1fa
}

input#search:focus::-webkit-input-placeholder {
    color: transparent
}

input#search:focus:-moz-placeholder {
    color: transparent
}

input#search:focus::-moz-placeholder {
    color: transparent
}

input#search:focus:-ms-input-placeholder {
    color: transparent
}

input#search:focus::-ms-input-placeholder {
    color: transparent
}

input#search:focus::placeholder {
    color: transparent
}

.menu-buttons {
    width   : 100%;
    display : flex;
    position: relative
}

.menu-item {
    background   : 0 0;
    border       : 1px solid #2d88ff;
    color        : #fff;
    padding      : 5px;
    font-size    : 24px;
    font-weight  : 500;
    transition   : .3s;
    border-radius: 10px;
    width        : 24%;
    margin       : 0 2px;
    text-align   : center;
    margin-right : 1%
}

.menu-item:last-child {
    margin: 0
}

.menu-item:hover {
    background-color: #2d88ff;
    border          : 1px solid #2d88ff;
    color           : #fff !important;
    opacity         : 100% !important
}

.menu-item.active {
    background-color: #2d88ff;
    border          : 1px solid #2d88ff;
    color           : #fff !important;
    opacity         : 100% !important
}

footer {
    width   : 100%;
    display : block;
    position: relative
}

.copyrights p {
    width     : 100%;
    text-align: center;
    font-size : 15px;
    padding   : 0 0 20px 0
}

.social-icon {
    margin    : auto;
    width     : 100%;
    text-align: center;
    padding   : 20px 0 00px 0
}

.social-icon img {
    width : 70px;
    height: 70px
}

.scrolltop {
    height  : 100px;
    position: fixed;
    bottom  : -40px;
    left    : 20px
}

.scrolltop img {
    width : 30px;
    height: auto
}

.scrolltop span {
    position : relative;
    bottom   : 10px;
    font-size: 18px;
    color    : #fff
}

.main-content {
    min-height: 60vh;
    margin    : 20px 0
}

.inner-content {
    width    : 40%;
    margin   : 20px auto 40px;
    font-size: 20px
}

.content {
    width     : 100%;
    text-align: center;
    padding   : 0 15px
}

.content h1 {
    font-size: 40px;
    width    : 100%
}

.content h1 span {
    display: block
}

.content h2 {
    font-size: 24px;
    padding  : 20px 0
}

.content p {
    font-size: 20px;
    padding  : 20px 0
}

.inner-content p {
    padding: 20px 0
}

.inner-content ul {
    list-style   : none;
    padding      : 0;
    margin-bottom: 20px
}

.inner-content ul li {
    padding-left: 1em;
    text-align  : left;
    line-height : 30px;
    display     : table-row
}

.inner-content ul li::before {
    content       : "•";
    color         : #2d88ff;
    font-size     : 80px;
    vertical-align: top;
    display       : table-cell;
    padding       : 2px
}

.signin-btn {
    padding      : 15px;
    width        : 230px;
    position     : relative;
    display      : inline-block;
    margin-bottom: 20px;
    background   : 0 0;
    color        : #fff
}

.google-btn {
    border: 1px solid #000
}

.fb-btn {
    background: #3f51b5;
    color     : #fff !important
}

.twitter-btn {
    background: #1da1f2;
    color     : #fff !important
}

.keypoints span {
    display      : inline-block;
    background   : #2d88ff;
    width        : 50px;
    height       : 50px;
    margin       : auto;
    border-radius: 50%;
    padding      : 10px;
    font-size    : 22px;
    color        : #fff
}

.keypoints p {
    padding: 5px 0 30px 0
}

.content-text {
    text-align   : left;
    margin-bottom: 30px
}

.content-text h3 {
    color      : #2d88ff;
    font-size  : 20px;
    font-weight: 600
}

.content-text p {
    padding: 10px 0 0 25px
}

.content-text p:before {
    content     : "";
    border-color: transparent #2d88ff;
    border-style: solid;
    border-width: .25em 0 .25em .35em;
    display     : block;
    height      : 0;
    width       : 0;
    left        : -1em;
    top         : 1em;
    position    : relative
}

.menu-container {
    width  : 60%;
    display: block;
    margin : auto
}

.list-menu-item {
    width        : 60%;
    max-width    : 350px;
    background   : 0 0;
    border       : 1px solid #2d88ff;
    border-radius: 5px;
    text-align   : center;
    padding      : 10px;
    display      : inline-block;
    position     : relative;
    margin       : 20px 0;
    color        : #fff;
    font-size    : 20px
}

.list-menu-item:hover {
    background-color: #2d88ff;
    color           : #fff
}

.list-menu-title {
    width        : 100%;
    background   : 0 0;
    border       : 1px solid #2d88ff;
    border-radius: 5px;
    text-align   : center;
    display      : inline-block;
    position     : relative;
    margin       : 20px 0;
    box-shadow   : 0 0 1px transparent
}

.list-menu-title .card-header {
    padding         : 0;
    background-color: transparent;
    border          : none
}

.list-menu-title .btn-link {
    font-weight    : 400;
    color          : #007bff;
    text-decoration: none;
    width          : 100%;
    padding        : 10px;
    color          : #fff;
    font-size      : 20px;
    text-align     : left;
    border-radius  : 0 !important
}

.list-menu-title .btn-link:hover {
    color           : #fff;
    background-color: #2d88ff;
    transition      : .5s
}

.list-menu-title .card-header .btn[aria-expanded=true] {
    color           : #fff;
    background-color: #2d88ff
}

.list-menu-title p {
    text-align: left;
    padding   : 10px 0
}

.tab {
    padding   : 15px;
    text-align: left;
    float     : left;
    display   : block;
    position  : relative;
    width     : 100%;
    height    : auto
}

.tab ul a {
    font-size      : 22px;
    text-decoration: none
}

.tab ul a:hover {
    color: #2d88ff
}

.tab ul {
    font-size     : 20px;
    letter-spacing: 2px;
    padding-left  : 30px;
    overflow-wrap : break-word
}

.tab ul li {
    margin-bottom: 5px;
    font-size    : 20px;
    color        : #fff
}

.arrow {
    margin-bottom: -3px
}

.small {
    height: 12px;
    width : 12px
}

.medium {
    width : 15px;
    height: 15px
}

.large {
    width : 18px;
    height: 18px
}

.syllable {
    display: inline-block
}

.syllable span {
    margin-bottom: 0;
    display      : block;
    text-align   : center
}

.fav-icon {
    width        : 20px;
    height       : 20px;
    background   : 0 0;
    border       : 2px solid #2d88ff;
    border-radius: 50px;
    margin-left  : -35px;
    display      : inline-block;
    margin-top   : 5px;
    margin-right : 2px;
    cursor       : pointer;
    transition   : .5s;
    position     : absolute
}

.fav-icon.selected {
    background: #2d88ff
}

.teal {
    color: #2d88ff
}

.card-body h4 {
    font-size : 22px;
    text-align: left
}

@media (max-width:767px) {
    header {
        padding: 10px
    }

    header .logo {
        max-width: 150px
    }

    .circle {
        width : 15px;
        height: 15px
    }

    .has-search .form-control-feedback {
        width : 30px;
        height: 30px
    }

    input#search {
        padding  : 15px 15px 15px 40px;
        font-size: 20px
    }

    .scrolltop {
        bottom: 30px
    }

    .scrolltop img {
        width: 25px
    }

    .scrolltop span {
        bottom   : 8px;
        font-size: 16px
    }

    .content h1 {
        font-size: 30px
    }

    .content h2 {
        font-size: 20px
    }

    .content p {
        font-size: 18px
    }

    .inner-content {
        width    : 90%;
        font-size: 18px
    }

    .content-text h3 {
        font-size: 18px
    }

    .keypoints span {
        font-size: 20px;
        padding  : 12px
    }

    .menu-container {
        width: 100%
    }

    .list-menu-item {
        width    : 90%;
        font-size: 18px
    }

    .modal-content {
        width: 95% !important
    }

    .tab #bottt {
        border-bottom: none !important
    }

    .scrolltop {
        display: none !important
    }
}

@media only screen and (max-width:991px) {
    .menu-item {
        padding  : 2px;
        font-size: 14px
    }
}

.modal-content {
    border-width      : 1px;
    border-color      : #7b7b7b;
    border-radius     : 15px;
    min-height        : 200px;
    background        : #212121;
    width             : 65%;
    margin            : auto;
    -webkit-box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
    box-shadow        : 0 5px 15px rgb(0 0 0 / 50%)
}

.modal-header {
    border: none
}

.modal-title {
    margin-bottom: 0;
    line-height  : 1.5;
    font-size    : 20px;
    text-align   : center;
    width        : 100%
}

.custom-switch {
    padding-left: 3.5rem
}

.custom-control-input {
    position: absolute;
    z-index : -1;
    opacity : 0;
    outline : 0
}

.custom-control-input:focus {
    outline: 0;
    border : 1px solid #000
}

.custom-control-input:focus~.custom-control-label::before {
    border: 1px solid #000
}

.custom-control-label::before {
    height          : 20px;
    background-color: #adadae;
    border          : 0;
    transition      : background-color .15s ease-in-out;
    cursor          : pointer
}

.custom-switch .custom-control-label::before {
    left         : -3.2rem;
    top          : 1px;
    width        : 80px;
    border-radius: 15px;
    box-shadow   : none;
    height       : 35px
}

.custom-switch .custom-control-label::after {
    width           : 25px;
    height          : 25px;
    top             : 6px;
    left            : calc(-3.2rem + 5px);
    background-color: #fff;
    border-radius   : 1.5rem;
    transition      : transform .15s ease-in-out 0s, background-color .15s ease-in-out 0s;
    cursor          : pointer
}

.custom-control-input:checked~.custom-control-label::before {
    color           : #fff;
    border          : 0;
    background-color: #2d88ff;
    cursor          : pointer
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
    transform: translateX(2.7rem);
    cursor   : pointer
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: none
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
    color           : #fff;
    background-color: #2d88ff;
    border-color    : #2d88ff
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: transparent
}

.custom-control-input1~.custom-control-label::before {
    background-color: #2d88ff;
    transition      : background-color .15s ease-in-out;
    cursor          : pointer
}

.custom-control-input1:checked~.custom-control-label::before {
    color           : #fff;
    border          : 0;
    background-color: #adadae;
    cursor          : pointer
}

.custom-switch .custom-control-input1:checked~.custom-control-label::after {
    transform: translateX(2.7rem);
    cursor   : pointer
}

.custom-control-input1:focus~.custom-control-label::before {
    box-shadow: none
}

.custom-control-input1:not(:disabled):active~.custom-control-label::before {
    color           : #fff;
    background-color: #2d88ff;
    border-color    : #2d88ff
}

.custom-control-input1:focus:not(:checked)~.custom-control-label::before {
    border-color: transparent
}

.modal-form-label {
    height     : 60px;
    font-size  : 18px;
    margin     : auto;
    padding    : 6px 0;
    margin-left: 15px
}

.forminput {
    background   : 0 0;
    padding      : 25px;
    border       : 1px solid #2d88ff;
    border-radius: 7px;
    color        : #fff;
    font-size    : 22px
}

.forminput::-webkit-input-placeholder {
    color: #fff
}

.forminput:-ms-input-placeholder {
    color: #fff
}

.forminput::placeholder {
    color: #fff
}

.forminput:focus {
    background-color: transparent;
    color           : #fff;
    border-color    : #5da1fa;
    outline         : 0;
    box-shadow      : 0 0 0 .1rem #5da1fa
}

.forminput:focus::placeholder {
    color: transparent
}

.button {
    background-color           : #2d88ff;
    border                     : 2px solid #2d88ff;
    color                      : #fff !important;
    opacity                    : 100% !important;
    font-size                  : 20px;
    padding                    : 5px 20px;
    -webkit-tap-highlight-color: #2d88ff !important
}

.error {
    color  : red;
    float  : left;
    padding: 5px
}

p.heading {
    font-size : 22px;
    padding   : 5px 0 5px 0;
    margin-top: 25px
}

.high {
    color: #2d88ff !important
}

.mb-25 {
    margin-bottom: 25px
}

.examples {
    width      : 96%;
    text-align : left;
    margin     : 0 auto;
    position   : relative;
    display    : inline-block;
    padding-top: 25px
}

.playtestcontainer {
    width        : 100%;
    float        : left;
    text-align   : left;
    padding      : 20px 20px 10px 20px;
    border-bottom: 1px solid #eee
}

.tab #bott,
.tab #bottt {
    border-bottom: 1px dashed silver;
    width        : 100%
}

.searchcount {
    width     : 100%;
    text-align: left;
    font-size : 20px
}

.resultcontainer {
    display : block;
    position: relative;
    width   : 100%
}

.pwd-container {
    display: none
}

.acferror {
    display    : block;
    font-size  : 18px;
    font-weight: 700;
    color      : red;
    width      : 100%;
    text-align : center
}

p.modaltxt {
    font-size : 20px;
    text-align: center;
    padding   : 15px
}

h3.modaltxt {
    font-size     : 26px;
    text-align    : center;
    padding-bottom: 10px;
    font-weight   : 700
}

.modalbtn {
    border-radius: 25px;
    padding      : 5px 35px;
    font-size    : 24px
}

.row.accordion-content {
    margin: 0
}

.alert {
    color: #888
}

.faq-cat {
    display: inline-flex
}

.faq-cat::before {
    content: '-';
    padding: 0 5px 0 20px
}

.minor-category::before {
    content: '-';
    padding: 0 5px 0 20px
}