:root {
    --arrow-bg: rgba(255, 255, 255, 0.3);
    --arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);
    --option-bg: white;
    --select-bg: rgba(255, 255, 255, 0.2);
}

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

p {
    margin-top: 7px;
    font-size: 12pt;
}

select {
    /* Reset */
    color: black;
    appearance: none;
    border: 0;
    outline: 0;
    font: inherit;
    /* Personalize */
    width: 20rem;
    padding: 1rem 4rem 1rem 1rem;
    background: var(--arrow-icon) no-repeat right 0.8em center / 1.4em,
        linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
    border-radius: 0.25em;
    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    /* Remove IE arrow */
    &::-ms-expand {
        display: none;
    }
    /* Remove focus outline */
    &:focus {
        outline: none;
    }
    /* <option> colors */
    option {
        color: inherit;
        background-color: var(--option-bg);
    }
}

.container {
    padding: 16px;
}

input[type=text], input[type=password] {
    font-size: 12pt;
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

textarea {
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

textarea:focus {
    background-color: #ddd;
    outline: none;
}

hr {

    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}

.hr2 {
    border: 0.5px dotted #f1f1f1;
    margin-bottom: 10px;
}

h3 {
    padding: 10px 0px 2.5px 10px;
    /*margin-top: 3px;*/
    margin-bottom: 0px;
    /*    border-top: solid #ddd;
        border-bottom: dotted #ddd;*/
    font-size: 13.5pt;
    border-left: solid #ddd;
    border-width: thick 10px;
    /*border-bottom: solid thin #ddd;*/
    color: cadetblue;
    font-weight: normal;
    white-space: pre-wrap;
    line-height: 1.6;
}

.submitBtn {
    background-color: #04aa6d;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    font-size: 14pt;
}

.submitBtn:hover{
    opacity: 1;
}

.editBtn {
    background-color: #04aa6d;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    opacity: 0.9;
    font-size: 11pt;
}

.editBtn:hover{
    opacity: 1;
}

.cancelBtn {
    background-color: #555;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    opacity: 0.9;
    font-size: 11pt;
}

.cancelBtn:hover{
    opacity: 1;
}

.aPublishButton {
    font-size: 11pt;
    color: white;
    padding: 10px;
    background: cadetblue;
    text-decoration: none;
    border-radius: 5px;
}

.aPublishButton:visited  {
    font-size: 11pt;
    color: white;
    padding: 10px;
    background: cadetblue;
    text-decoration: none;
    border-radius: 5px;
}

.aEditButton {
    font-size: 11pt;
    color: white;
    padding: 10px;
    background: darkorange;
    text-decoration: none;
    border-radius: 5px;
}

.aEditButton:visited  {
    font-size: 11pt;
    color: white;
    padding: 10px;
    background: darkorange;
    text-decoration: none;
    border-radius: 5px;
}

.aDeleteButton {
    font-size: 11pt;
    color: white;
    padding: 10px;
    background: orangered;
    text-decoration: none;
    border-radius: 5px;
}

.aDeleteButton:visited  {
    font-size: 11pt;
    color: white;
    padding: 10px;
    background: orangered;
    text-decoration: none;
    border-radius: 5px;
}

.aTime {
    font-size: 11pt;
    color: white;
    padding: 7px 17px;
    background: burlywood;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.aTime:link {
    font-size: 11pt;
    color: white;
    padding: 7px 17px;
    background: burlywood;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.aTime:visited  {
    font-size: 11pt;
    color: white;
    padding: 7px 17px;
    background: burlywood;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.aLastUpdated {
    font-size: 8pt;
    color: #757575;
    padding: 10px;
    background: #d3d3d3;
    text-decoration: none;
    border-radius: 5px;
    /*text-transform: uppercase;*/
    font-weight: bold;
}

.aLastUpdated  {
    font-size: 8pt;
    color: #757575;
    padding: 10px;
    background: #d3d3d3;
    text-decoration: none;
    border-radius: 5px;
    /*text-transform: uppercase;*/
    font-weight: bold;
}

.aDataShow {
    font-size: 8pt;
    color: #dea346;
    padding: 10px;
    background: antiquewhite;
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
}

.aDataShow  {
    font-size: 8pt;
    color: #dea346;
    padding: 10px;
    background: antiquewhite;
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
}

.aNewButton {
    top: 75px;
    right: 10px;
    position: absolute;
    padding: 10px;
    font-size: 11pt;
    color: white;
    background: darkturquoise;
    text-decoration: none;
    border-radius: 5px;
}

.aNewButton:visited  {
    top: 75px;
    right: 10px;
    position: absolute;
    padding: 10px;
    font-size: 11pt;
    color: white;
    background: darkturquoise;
    text-decoration: none;
    border-radius: 5px;
}

.deleteBG {
    margin:15px;
    padding: 15px 15px 1px 15px;
    background: #f1f1f1;
    border-radius: 10px;
}

a {
    color: steelblue;
}

.signin {
    margin: 15px;
    background-color: #f1f1f1;
    text-align: center;
}

.signin2 {
    background-color: #f1f1f1;
    text-align: center;
}

.searchEngine {
    font-family: Arial, Helvetica, sans-serif;

}

.searchEngine input[type=text]{
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
    font-size: 11.5pt;
    border-radius: 5px;
    margin-bottom: 0px;
}

.searchEngine2 {
    font-family: Arial, Helvetica, sans-serif;

}

.searchEngine2 input[type=text]{
    width: 25%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
    font-size: 11.5pt;
    border-radius: 5px;
    margin-bottom: 0px;
}

.columnLeft {
    float: left;
    width: 70%;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 0px;
    margin-bottom: 5px;
}
.columnFull {
    width: 100%;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 0px;
    margin-bottom: 5px;
}

.columnRight {
    float: left;
    width: 30%;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 0px;
    margin-bottom: 5px;
    text-align: right;
}

.columnLeftNarative {
    float: left;
    width: 5%;
    padding-bottom: 0px;
    margin-bottom: -5px;
}
.columnFullNarative {
    width: 100%;
    padding-bottom: 0px;
    margin-bottom: 5px;
}

.columnRightNarative {
    float: left;
    width: 94%;
    padding-bottom: 0px;
    margin-bottom: -5px;
    margin-top: -3px;
    white-space: pre-line;
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-word;
}

/* Clear floats after the columns */
.rowTitle:after {
    content: "";
    display: table;
    clear: both;
}

.ButtonAtBottom {
    margin-top: 10px;
    margin-bottom: -20px;
    width: 100%;
    float: left;
}


@media screen and (max-width: 1792px) {
    .columnLeftNarative {
        float: left;
        width: 4%;
        padding-bottom: 0px;
        margin-bottom: -5px;
    }
    .columnFullNarative {
        width: 100%;
        padding-bottom: 0px;
        margin-bottom: 5px;
    }

    .columnRightNarative {
        float: left;
        width: 96%;
        padding-bottom: 0px;
        margin-bottom: -5px;
        margin-top: -3px;
        white-space: pre-line;
        line-height: 1.6;
        text-align: justify;
        text-justify: inter-word;
    }

    .ButtonAtBottom {
        margin-top: 10px;
        margin-bottom: -20px;
        width: 100%;
        float: left;
    }
}

@media screen and (max-width: 1440px) {
    .columnLeftNarative {
        float: left;
        width: 4.5%;
        padding-bottom: 0px;
        margin-bottom: -5px;
    }
    .columnFullNarative {
        width: 100%;
        padding-bottom: 0px;
        margin-bottom: 5px;
    }

    .columnRightNarative {
        float: left;
        width: 95.5%;
        padding-bottom: 0px;
        margin-bottom: -5px;
        margin-top: -3px;
        white-space: pre-line;
        line-height: 1.6;
        text-align: justify;
        text-justify: inter-word;
    }

    .ButtonAtBottom {
        margin-top: 10px;
        margin-bottom: -20px;
        width: 100%;
        float: left;
    }
}

/*tablet*/
@media screen and (max-width: 1200px) {
    .columnLeftNarative {
        float: left;
        width: 5.8%;
        padding-bottom: 0px;
        margin-bottom: -5px;
    }
    .columnFullNarative {
        width: 100%;
        padding-bottom: 0px;
        margin-bottom: 5px;
    }

    .columnRightNarative {
        float: left;
        width: 94.2%;
        padding-bottom: 0px;
        margin-bottom: -5px;
        margin-top: -3px;
        white-space: pre-line;
        line-height: 1.6;
        text-align: justify;
        text-justify: inter-word;
    }

    .ButtonAtBottom {
        margin-top: 10px;
        margin-bottom: -20px;
        width: 100%;
        float: left;
    }

    .columnLeft {
        float: left;
        width: 100%;
        border-bottom: none;
        padding-bottom: 0px;
        margin-bottom: 5px;
    }
    .columnFull {
        width: 100%;
        /*border-bottom: 1px solid #f1f1f1;*/
        padding-bottom: 0px;
        margin-bottom: 5px;
    }

    .columnRight {
        float: left;
        width: 100%;
        padding-bottom: 0px;
        border-bottom: none;
        margin-top: -15px;
        margin-bottom: 5px;
        text-align: left;
    }

    .aLastUpdated {
        font-size: 6.5pt;
        color: #757575;
        padding: 10px;
        background: #d3d3d3;
        text-decoration: none;
        border-radius: 5px;
        /*text-transform: uppercase;*/
        font-weight: bold;
    }

    .aLastUpdated  {
        font-size: 6.5pt;
        color: #757575;
        padding: 10px;
        background: #d3d3d3;
        text-decoration: none;
        border-radius: 5px;
        /*text-transform: uppercase;*/
        font-weight: bold;
    }
}

@media screen and (max-width: 768px) {
    body {
        font-family: Arial, Helvetica, sans-serif;
    }

    p {
        margin-top: 7px;
        font-size: 10pt;
    }

    select {
        /* Reset */
        color: black;
        appearance: none;
        border: 0;
        outline: 0;
        font: inherit;
        /* Personalize */
        width: 20rem;
        padding: 1rem 4rem 1rem 1rem;
        background: var(--arrow-icon) no-repeat right 0.8em center / 1.4em,
            linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
        border-radius: 0.25em;
        box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
        cursor: pointer;
        /* Remove IE arrow */
        &::-ms-expand {
            display: none;
        }
        /* Remove focus outline */
        &:focus {
            outline: none;
        }
        /* <option> colors */
        option {
            color: inherit;
            background-color: var(--option-bg);
        }
    }

    .container {
        padding: 16px;
    }

    input[type=text], input[type=password] {
        font-size: 10pt;
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        display: inline-block;
        border: none;
        background: #f1f1f1;
    }

    input[type=text]:focus, input[type=password]:focus {
        background-color: #ddd;
        outline: none;
    }

    textarea {
        font-size: 10pt;
        font-family: Arial, Helvetica, sans-serif;
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        display: inline-block;
        border: none;
        background: #f1f1f1;
    }

    textarea:focus {
        background-color: #ddd;
        outline: none;
    }

    hr {
        border: 1px solid #f1f1f1;
        margin-bottom: 25px;
    }

    .hr2 {
        border: 0.5px dotted #f1f1f1;
        margin-bottom: 10px;
    }

    h3 {
        padding: 3px 0px 2.5px 10px;
        margin-top: 18px;
        margin-bottom: 0px;
        /*    border-top: solid #ddd;
            border-bottom: dotted #ddd;*/
        font-size: 12pt;
        border-left: solid #ddd;
        border-width: thick 10px;
        /*border-bottom: solid thin #ddd;*/
        color: cadetblue;
        font-weight: normal;
        white-space: pre-wrap;
        line-height: 1.6;
    }

    .submitBtn {
        background-color: #04aa6d;
        color: white;
        padding: 16px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
        opacity: 0.9;
        font-size: 11pt;
    }

    .submitBtn:hover{
        opacity: 1;
    }

    .editBtn {
        background-color: #04aa6d;
        color: white;
        padding: 16px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        opacity: 0.9;
        font-size: 11pt;
    }

    .editBtn:hover{
        opacity: 1;
    }

    .cancelBtn {
        background-color: #555;
        color: white;
        padding: 16px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        opacity: 0.9;
        font-size: 11pt;
    }

    .cancelBtn:hover{
        opacity: 1;
    }

    .aPublishButton {
        font-size: 11pt;
        color: white;
        padding: 10px;
        background: cadetblue;
        text-decoration: none;
        border-radius: 5px;
    }

    .aPublishButton:visited  {
        font-size: 11pt;
        color: white;
        padding: 10px;
        background: cadetblue;
        text-decoration: none;
        border-radius: 5px;
    }

    .aEditButton {
        font-size: 11pt;
        color: white;
        padding: 10px;
        background: darkorange;
        text-decoration: none;
        border-radius: 5px;
    }

    .aEditButton:visited  {
        font-size: 11pt;
        color: white;
        padding: 10px;
        background: darkorange;
        text-decoration: none;
        border-radius: 5px;
    }

    .aDeleteButton {
        font-size: 11pt;
        color: white;
        padding: 10px;
        background: orangered;
        text-decoration: none;
        border-radius: 5px;
    }

    .aDeleteButton:visited  {
        font-size: 11pt;
        color: white;
        padding: 10px;
        background: orangered;
        text-decoration: none;
        border-radius: 5px;
    }

    .aTime {
        width: 100%;
        font-size: 8pt;
        color: white;
        padding: 6px 16px;
        background: burlywood;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
    }

    .aTime:link {
        width: 100%;
        font-size: 8pt;
        color: white;
        padding: 6px 16px;
        background: burlywood;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
    }

    .aTime:visited  {
        width: 100%;
        font-size: 8pt;
        color: white;
        padding: 6px 16px;
        background: burlywood;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
    }

    .aLastUpdated {
        font-size: 6pt;
        color: #757575;
        margin-top: 5px;
        padding: 5px;
        background: #d3d3d3;
        text-decoration: none;
        border-radius: 5px;
        /*text-transform: uppercase;*/
        font-weight: bold;
    }

    .aLastUpdated  {
        font-size: 6pt;
        color: #757575;
        margin-top: 5px;
        padding: 5px;
        background: #d3d3d3;
        text-decoration: none;
        border-radius: 5px;
        /*text-transform: uppercase;*/
        font-weight: bold;
    }

    .aDataShow {
        font-size: 6pt;
        color: #dea346;
        padding: 10px;
        background: antiquewhite;
        text-decoration: none;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: bold;
    }

    .aDataShow  {
        font-size: 6pt;
        color: #dea346;
        padding: 10px;
        background: antiquewhite;
        text-decoration: none;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: bold;
    }

    .aNewButton {
        top: 65px;
        right: 10px;
        position: absolute;
        padding: 10px;
        font-size: 8pt;
        color: white;
        background: darkturquoise;
        text-decoration: none;
        border-radius: 5px;
    }

    .aNewButton:visited  {
        top: 75px;
        right: 10px;
        position: absolute;
        padding: 10px;
        font-size: 8pt;
        color: white;
        background: darkturquoise;
        text-decoration: none;
        border-radius: 5px;
    }

    .deleteBG {
        margin:15px;
        padding: 15px 15px 1px 15px;
        background: #f1f1f1;
        border-radius: 10px;
    }

    a {
        color: steelblue;
    }

    .signin {
        margin: 15px;
        background-color: #f1f1f1;
        text-align: center;
    }

    .signin2 {
        background-color: #f1f1f1;
        text-align: center;
    }

    .searchEngine {
        font-family: Arial, Helvetica, sans-serif;
    }

    .searchEngine input[type=text]{
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        display: inline-block;
        border: none;
        background: #f1f1f1;
        font-size: 10pt;
        border-radius: 5px;
        margin-bottom: 0px;
    }

    .searchEngine2 {
        font-family: Arial, Helvetica, sans-serif;

    }

    .searchEngine2 input[type=text]{
        width: 25%;
        padding: 15px;
        margin: 5px 0 22px 0;
        display: inline-block;
        border: none;
        background: #f1f1f1;
        font-size: 10pt;
        border-radius: 5px;
        margin-bottom: 0px;
    }

    .columnLeft {
        float: left;
        width: 100%;
        /*border-bottom: 1px solid #f1f1f1;*/
        padding-bottom: 0px;
        margin-bottom: 5px;
    }
    .columnFull {
        width: 100%;
        /*border-bottom: 1px solid #f1f1f1;*/
        padding-bottom: 0px;
        margin-bottom: 5px;
    }

    .columnRight {
        float: left;
        width: 100%;
        padding-bottom: 0px;
        border-bottom: none;
        margin-top: -15px;
        margin-bottom: -10px;
        text-align: left;
    }

    .columnLeftNarative {
        float: left;
        width: 12%;
        padding-bottom: 0px;
        margin-top: 0px;
        margin-bottom: -13px;
        white-space: pre-line;
        line-height: 1.6;
        text-align: justify;
        text-justify: inter-word;
    }
    .columnFullNarative {
        width: 100%;
        padding-bottom: 0px;
        margin-bottom: 5px;
    }

    .columnRightNarative {
        float: left;
        width: 88%;
        padding-bottom: 0px;
        margin-top: -1px;
        margin-bottom: -13px;
        white-space: pre-line;
        line-height: 1.6;
        text-align: justify;
        text-justify: inter-word;
        ;
    }

    /* Clear floats after the columns */
    .rowTitle:after {
        content: "";
        display: table;
        clear: both;
    }

    .ButtonAtBottom {
        margin-top: 15px;
        margin-bottom: -20px;
        width: 100%;
        float: left;
    }
}