:root {
    /*basics*/
    --lightest: #ffffff;
    --lighter: #195d90;
    --light: #315579;
    --normal: #114064;
    --dark: #0D3C60;
    --darker: #042742;
    --darkest: #333333;
    
    /*body and header*/
    --body-bg-color: var(--normal);
    --body-dark-bg-color: var(--darker);
    --body-txt-color: var(--lightest);
    /*buttons*/
    --btn-bg-color: var(--lighter);
    --btn-alt-bg-color: #c9302c;
    --btn-txt-color: var(--lightest);
    --btn-border-color: var(#dbdbdb);
    /*tables*/
    --tbl-header-bg-color: var(--darker);
    --tbl-header-txt-color: var(--lightest);
    --tbl-data-txt-color: var(--lightest);
    --tbl-data-bg-color: var(--light);
    --tbl-data-alt-bg-color: var(--dark);
    /*text box*/
    --txtbox-bg: var(--lightest);
    --txtbox-txt: var(--darkest);
    /*links*/
    --lnk-color: yellow;
    --lnk-visited: yellow;
}
body {
    min-width:360px;
    margin:0px;
    font-family:Arial;
    overflow-x:hidden;
    background-color:var(--normal);
}
main{
    margin:8px;
}
form{
    /*width:99%;*/
}
section {
    border-radius: 15px;
    padding: 20px;
    background-color: var(--body-dark-bg-color);
}
.static_page  a{
    color:var(--lnk-color);
}
.static_page a:visited{
    color:var(--lnk-visited);
}
.darkened{
    background-color:var(--body-dark-bg-color);
    margin:0px;
    padding:10px;
    border-width:0px;
    border-radius:15px;
}

.page_title{
    color:var(--body-txt-color);
    font-size:30pt;
    margin-left:20px;
}
.data_grid {
    margin-top: 25px;
    border-collapse: separate;
    border-style:none;
    border-spacing: 3px 3px;
}

.data_grid tr:nth-child(even) td{
    background-color: var(--tbl-data-alt-bg-color);
}
.data_grid tr:nth-child(odd) td{
    background-color: var(--tbl-data-bg-color);
}
.data_grid_header {
    text-align:left;
    height: 40px;
}
/*.data_grid_header td{*/
.data_grid tr:first-child td{
    background-color: var(--darker);
}

/*****Rounded table rows*****/
.data_grid td {
    border-radius:10px;
}
.data_grid td, .data_grid th{
    border-style: hidden;
}
/*
/First col//
.data_grid tr td:first-child, .data_grid tr th:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
/*Last col//
.data_grid td:last-child, .data_grid th:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
*/
iframe {
    min-width: 650px;
    width:100%;
    height: 250px;
}

.login_container {
    width: 50%;
    background: var(--body-dark-bg-color);
    align-self: center;
    align-content: center;
    display: flex;
    flex-flow: column nowrap;
}

.login_header {
    background: #99D9EA;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #353432;
    padding: 15px;
    padding-left: 28px;
    font-size: 20px;
    text-align: left;
}

.login_content {
    padding-top: 10px;
    padding-bottom: 10px;
    align-content: center;
}

.login_input_1 {
    height: 45px;
    font-size: 20px; 
    /*
            background-image: url(./images/input_email.png);
            background-repeat: no-repeat;
            background-position: left 15px center;
      */      
    background-color: var(--lightest);
    border-radius: 5px;
    border-style: none;
    width: 80%;
    padding: 0px 8px;
    color: #555;
    margin-bottom: 2px;
}

.login_dll {
    height: 45px;
    font-size: 20px;
    background-color: var(--txtbox-bg);
    border-radius: 5px;
    border-style: none;
    width: 80%;
    padding: 5px;
    color: #555;
    text-overflow: ellipsis;
}

.login_input_btn {
    width: 80%;
    font-size: 20px;
    border-color: var(--btn-border-color);
    background-color: var(--btn-alt-bg-color);
    color: var(--btn-txt-color);
    border-radius: 5px;
    border-style: none;
    height: 45px;
    align-self: center;
    cursor: pointer;
}

.logout_input_btn {
    width: 415px;
    font-size: 16px;
    border-color: var(--btn-border-color);
    background-color: var(--btn-alt-bg-color);
    color: var(--btn-txt-color);
    border-radius: 5px;
    border-style: none;
    height: 45px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
}

.MainTable {
    width: 100%;
    vertical-align: top;
    border-collapse: collapse;
}

.big_text {
    height: 167px;
    font-size: 11pt; /*
            background-image: url(./images/input_email.png);
            background-repeat: no-repeat;
            background-position: left 15px center;
            */
    background-color: var(--txtbox-bg);
    border-radius: 5px;
    border-style: none;
    width: 97%;
    width: -moz-available;
    width: -webkit-fill-available;
    min-width:400px;
    padding: 10px;
    color: var(--txtbox-txt);
    margin-bottom: 2px;
}
.tall_text{
    height:300px;
}

.short_text {
    height: 20px;
    font-size: 11pt;
    background-color: var(--txtbox-bg);
    border-radius: 5px;
    border-style: none;
    width: 400px;
    padding: 0px 8px;
    color: var(--txtbox-txt);
    margin-bottom: 2px;
}
.purchase_info_segment .short_text{
    margin-left: 10px;
}

.wide_text {
    min-width: 400px;
    height: 20px;
    font-size: 11pt;
    background-color: var(--txtbox-bg);
    border-radius: 5px;
    border-style: none;
    width: 95%;
    width: -moz-available;
    width: -webkit-fill-available;
    padding: 0px 8px;
    color: var(--txtbox-txt);
    margin-bottom: 2px;
}

.activation_btn {
    width: 415px;
    font-size: 16px;
    border-color: var(--btn-border-color);
    background-color: var(--btn-bg-color);
    color: var(--btn-txt-color);
    border-radius: 5px;
    border-style: none;
    height: 45px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.caption_support {
    font-size: 18px;
    font-family: Arial;
}

.simple_btn {
    width: stretch;
    font-size: 15px;
    border-color: var(--btn-border-color);
    background-color: var(--btn-bg-color);
    color: var(--btn-txt-color);
    border-radius: 5px;
    border-width: 1px;
    border-style: none;
    height: 35px;
    cursor: pointer;
    margin: 0px 5px 0px 5px;
    padding: 0px 20px 0px 20px;
}


.grid_text {
    height: 30px;
    font-size: 11pt;
    color: var(--body-txt-color);
    width:100%;
}


.CSVclass {
    /*  Set the width of the 2nd GridView column */
    width: 700px;
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: pre-wrap; /* css-3 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;
}

.help_container {
    width: 600px;
    padding: 10px;
    background: #99D9EA;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    color: var(--darker);
    position: relative;
    z-index: 1000;
    left: 50%;
    top: 50%;
    font-family: Verdana;
    font-size: 12pt;
    font-weight: bold;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.product_label{
    display:block;
    color:var(--body-txt-color);
    font-size:16pt;
    text-transform:uppercase;
}

.portal_header {
    padding: 8px;
    height: contain;
    width: 100%;
    height: 50px;
    background-color: var(--body-dark-bg-color);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.portal_header > a {
    float:right;
    margin-right:2%;
}
.portal_header a {
    display: inline-flex;
    flex-flow: column nowrap;
    justify-content: space-around;
}

.portal_header span {
    color: var(--body-txt-color);
    font-size: 24pt;
    /*width: 420px;*/
    vertical-align:middle;
    display:inline-flex;
    flex-flow: column nowrap;
    justify-content:space-around;
    text-align:left;
    z-index:11;
}

.portal_header *{
    order:1;
    vertical-align:central;
    place-content:center;
}

.purchase_info_container {
    display:flex;
    flex-flow:column nowrap;
    justify-content:space-between;
}

.purchase_info_segment {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items:center;
    margin: 0px 5px 15px 5px;
}

.support_plan_container{
    display:flex;
    flex-flow:column nowrap;
    justify-content:space-between;
    align-content:center;
    /*text-align:center;*/
}
.support_plan_container span{
    flex-grow:0;
}

.activation_container_outer {
    display: flex;
    flex-flow: column nowrap;
    font-size: 11pt;
    color: var(--body-txt-color);
    justify-content: center;
    align-content:center;
    padding: 20px;
}
.activation_container_inner {
    display: flex;
    flex-flow: row wrap;
    font-size: 11pt;
    color: var(--body-txt-color);
    justify-content: flex-start;
    margin-top: 20px;
    width: 100%
}
/*claim_purchase_container{
    width:max-content;
}*/
.reissue_container {
    display: flex;
    /*flex-flow: row wrap;*/
    flex-flow: column nowrap;
    font-size: 11pt;
    color: var(--body-txt-color);
    justify-content: flex-start;
    padding: 15px 0px 0px 15px;
}
.reissue_container>section{
    margin:10px 10px 10px 10px;
    flex-grow:3;
}
.grid_container{
    width:95%;
}
.activation_container_inner > section {
    margin: 15px 15px 15px 15px;
    flex-grow: 1;
}
.section_title {
    text-align: center;
    color: var(--body-txt-color);
    font-size: 18pt;
    text-transform: capitalize;
}
.centered_title{
    justify-content:center;
    text-align:center;
}
.field_title{
    width:fit-content;
}
.portal_footer{
    margin: 25px 10px 15px 10px;
    position:static;
    bottom:0px;
    text-align:center;
    color:var(--lnk-color);
    order:9;
}
.portal_footer a{
    color:var(--lnk-color);
    margin:10px;
    border-radius:7px;
 }
.portal_footer label{
    cursor:pointer;
}
.portal_footer a:visited {
    color:var(--lnk-visited);
}
.portal_footer a:hover {
    background-color:var(--light);
    color:var(--lightest);
}

.collapsible_collapser {
    /*
    left: 389px;
    top: 150px;*/
    height: 30px;
    width: 30px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    margin: 0px;
}
.collapser_icon {
    height: 50px;
    width: 50px;
    /*position: relative;
    left: 389px;
    top: -43px;*/
    margin-right: 35px;
    padding: 0px;
    z-index: 1;
    background-color: var(--btn-bg-color);
    padding: 5px;
    border-radius: 7px;
}
.collapser_icon_h {
    display: block;
    content: "";
    background-color: var(--btn-txt-color);
    height: 16%;
    width: 100%;
    margin: 0;
    border-radius: 4px;
    border-block-width: 0px;
    position: relative;
    top: 41%;
}
.collapser_icon_v {
    display: none;
    content: "";
    background-color: var(--btn-txt-color);
    height: 100%;
    width: 16%;
    margin: 0px;
    border-radius: 4px;
    border-block-width: 0px;
    position: relative;
    left: 43%;
    top: -16%;
}

.burger_content {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-content: center;
    position: relative;
    top: -80px;
    background-color: var(--body-dark-bg-color);
    width: 97%;
    height: 250px;
    padding: 15px;
    border-radius: 13px;
}

 .burger_content * {
     position: relative;
     left: 8px;
     z-index:11;
 }

.burger_input {
    z-index: 13;
    opacity: 0%;
    position: absolute;
    cursor: pointer;
    top: 17px;
    left: 16px;
    width: 40px;
    height: 40px;
}

.burger_icon {
    z-index: 11;
    position: sticky;
    height: 35px;
    width: 35px;
    display: inline-flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-content: center;
    margin: 15px;
    padding: 7px;
    border-radius: 8px;
    background-color: var(--body-dark-bg-color);
}

.burger_layer {
    display: block;
    background-color: var(--body-txt-color);
    width: 95%;
    height: 7px;
    content: "";
    z-index: 5;
    margin: 3px 0px 3px 0px;
    border-radius: 5px;
}

.burger_area {
    position: absolute;
    top: -10px;
    left: -11px;
    width: fit-content;
    text-align:left;
}

.burger_input:checked ~ .burger_content {
    display: none;
}

.burger_link {
    width: 415px;
    font-size: 16px;
    border-color: var(--btn-border-color);
    background-color: var(--btn-bg-color);
    color: var(--btn-txt-color);
    border-radius: 5px;
    border-style: none;
    height: 45px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    text-align: center;
}

/*Section of Sections*/
.sos{
    margin:0px;
    padding:0px;
    border: 0px none transparent;
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
    width:99%;
    border-radius:15px;
    background-color:var(--body-dark-bg-color)
}
.sos section{
    flex-grow:1;
    padding-left: 42px;

}

/*login page (aka Default.aspx)*/
.static_page{
    background-color:var(--lighter);
    text-align:center;
}
.static_page img, .corner_logo {
    align-self: start;
}

/*Static pages (User Manual | Privacy Policy | Terms of ervice)*/
.static_title{
    align-self:center;
    font-size:18pt;
    color:var(--body-txt-color);
    margin:0px;
}
.static_sub_title {
    display:block;
    align-self: center;
    font-size: 14pt;
    color: var(--body-txt-color);
}
.static_container{
    display:flex;
    flex-flow: column nowrap;
    justify-content:flex-start;
    align-content:flex-start
}
.static_section{
    background-color:var(--lighter);
    margin:30px;
    margin-bottom:0px;
    text-align:left;
}

/*hide paypal section if empty*/
#paypal_section[height="0"]{
    display:none;
}

@media only screen and (max-device-width:1080px), (orientation:portrait) {
    iframe {
        width: 97%;
        min-height: 615px;
    }
    section {
        padding: 42px;
    }
    .data_grid tbody {
        background-color: var(--tbl-header-bg-color);
    }
    .data_grid tr:nth-child(odd) td {
        background-color: transparent;
    }
    .data_grid tr:nth-child(even) td {
        background-color: transparent;
    }
    .page_title {
        font-size: 45pt;
        position: fixed;
        top: 38px;
        left: 120px;
        z-index: 22;
    }
    .portal_header {
        display: none;
    }

    .static_page img, .corner_logo {
        width:120px;
    }
    .logout_input_btn {
        height: fit-content;
        font-size: 40pt;
        padding: 15px 15px 15px 15px;
        width: 100%;
    }
    .login_container{
        width:90%;
    }
    .login_input_btn {
        height: fit-content;
        font-size: 40pt;
        padding: 15px 15px 15px 15px;
        width: 100%;
    }

    .purchase_info_container {
        font-size: 30pt;
    }

    .purchase_info_segment {
        margin: 0px 5px 30px 5px;
    }

    .collapsible_collapser {
        position: absolute;
        height: 120px;
        width: 90%;
    }

    .collapser_icon {
        scale: 140%;
        position: absolute;
        right:56px;
    }

    .product_label {
        font-size: 25pt;
        font-weight: bolder;
        /*text-align:center;*/
    }

    .activation_container_inner {
        flex-flow: column nowrap;
        flex-grow: 1;
        flex-shrink: 0;
        font-size: 40pt;
    }

    .reissue_container {
        flex-flow: column nowrap;
        flex-grow: 1;
        flex-shrink: 0;
        font-size: 40pt;
    }

    .activation_btn {
        font-size: 35pt;
        height: 100px;
        width: 97%;
        align-self: flex-start;
    }

    .wide_text {
        height: 55px;
        font-size: 35pt;
        width: 95%;
        align-self: flex-start;
    }

    .short_text {
        font-size: 35pt;
        height: 55px;
        width: 95%;
        align-self: flex-start;
    }
    .purchase_info_segment .short_text {
        margin-left: 0px;
    }
    .big_text {
        font-size: 35pt;
        height:fit-content;
        min-height: 200px;
        width: 95%;
        align-self: flex-start;
    }

    .grid_text {
        font-size: 25pt;
        height: 60px;
    }

    .simple_btn {
        font-size: 25pt;
        height: 100px;
        margin: 5px
    }

    .portal_footer {
        font-size: 30pt;
    }

    table {
        word-break: break-word;
        table-layout: fixed;
    }

    .section_title {
        font-size: 36pt;
    }
    .centered_title {
        justify-content:center;;
    }
    .burger_content {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-end;
        align-content: center;
        position: relative;
        top: -135px;
        background-color: var(--body-dark-bg-color);
        width: 97%;
        height: fit-content;
        padding: 15px;
        border-radius: 13px;
    }

        .burger_content * {
            position: relative;
            top: 125px;
        }

    .burger_input {
        z-index: 13;
        opacity: 0%;
        position: absolute;
        top: 19px;
        left: 17px;
        width: 100px;
        height: 100px;
        cursor: pointer;
    }

    .burger_icon {
        z-index: 11;
        position: sticky;
        height: 100px;
        width: 100px;
        display: inline-flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        align-content: center;
        margin: 15px;
        padding: 7px;
        border-radius: 8px;
        background-color: var(--body-dark-bg-color);
    }

    .burger_layer {
        display: block;
        background-color: var(--body-txt-color);
        width: 95%;
        height: 50px;
        content: "";
        z-index: 5;
        margin: 10px 0px 10px 0px;
        border-radius: 5px;
    }

    .burger_area {
        position: sticky;
        top: 0px;
        left: 0px;
        width: 100%;
    }
    /*

    .burger_input:checked ~ .burger_content {
        display: flex;
    }
    */

    .burger_link {
        border-color: var(--btn-border-color);
        background-color: var(--btn-bg-color);
        color: var(--btn-txt-color);
        border-radius: 5px;
        border-style: none;
        cursor: pointer;
        margin: 10px 0px 10px 0px;
        font-size: 35pt;
        height: fit-content;
        width: 100%;
        align-self: flex-start;
        text-align: center;
        text-decoration: none;
        padding: 18px 0px 17px 0px;
    }

    .mobile_header {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-content: stretch;
        position: sticky;
        top: 0px;
        background-color: var(--body-dark-bg-color);
        z-index: 5;
        width: 101%
    }

    .mobile_header img {
        height: 100px;
        resize: both;
        position: absolute;
        top: 19px;
        right: 17px;
    }

    .collapsible_content {
    }

    .collapsible_collapser:checked ~ .collapsible_content {
        display: none;
        margin-bottom: 20px;
    }

    .collapsible_collapser:checked ~ div > .collapser_icon > .collapser_icon_v {
        display: block;
    }
    .collapsible_collapser ~ .purchase_info_segment, .collapsible_content {
        /*position: relative;
        top: -130px;*/
    }
    /*
    .paypal_table{
        width:100%;
        text-align:center;
    }
    section iframe{
        width:100%
    }
    .data_grid {
        display:block;
    }
    .data_grid tbody{
        display:flex;
        flex-flow:row wrap;
    }
    .data_grid tr{
        display:flex;
        flex-flow:column nowrap;
    }
        */
    .data_grid {
        width:97%;
        border:none;
    }
    .data_grid tr {
        display: inline-flex;
        width:97%;
        flex-flow: column nowrap;
        border: 10px none var(--darker);
        border-radius: 8px;
        margin: 15px;
        background: rgb(4,39,66);
        background: linear-gradient(90deg, rgba(4,39,66,1) 20%, rgba(17,64,100,1) 80%);
        box-shadow: var(--darker)99 10px 10px;
    }

    .data_grid tr td {
        border: none;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        margin:15px 10px;
    }

    .data_grid tr:first-child {
        display: none;
    }

    .purchase_grid tr td:nth-child(1)::before {
        content: "Serial Number:  ";
        margin-right: 10px;
        font-weight: 700;
    }

    .purchase_grid tr td:nth-child(2)::before {
        margin-right: 10px;
        content: "Expiration Date:  ";
        font-weight: 700;
    }

    .purchase_grid tr td:nth-child(3)::before {
        margin-right: 10px;
        content: "Product:  ";
        font-weight: 700;
    }

    .purchase_grid tr td:nth-child(4)::before {
        margin-right: 10px;
        content: "Total Units:  ";
        font-weight: 700;
    }

    .purchase_grid tr td:nth-child(5)::before {
        margin-right: 10px;
        content: "Used Units:  ";
        font-weight: 700;
    }

    .purchase_grid tr td:nth-child(6)::before {
        margin-right: 10px;
        content: "Support Plan:  ";
        font-weight: 700;
    }

    .purchase_grid tr td:nth-child(7)::before {
        margin-right: 10px;
        content: "Support Expiration:  ";
        font-weight: 700;
    }

    .activation_grid tr td:nth-child(1)::before {
        content: "Activation Date:  ";
        margin-right: 10px;
        font-weight: 700;
    }

    .activation_grid tr td:nth-child(2)::before {
        content: "CSV Text:  ";
        margin-right: 10px;
        font-weight: 700;
    }

    .activation_grid tr td:nth-child(3)::before {
        content: "Activation Code:  ";
        margin-right: 10px;
        font-weight: 700;
    }

    .activation_grid tr td:nth-child(2) {
        white-space: nowrap;
        overflow: hidden;
    }

    .activation_grid tr td:nth-child(2):hover {
        white-space: normal;
        overflow: visible;
    }

    .support_ticket_grid tr td:nth-child(1)::before{
        content:"Ticket ID:  ";
        margin-right:10px;
        font-weight:700;
    }
    .support_ticket_grid tr td:nth-child(2)::before {
        content: "Ticket Email:  ";
        margin-right: 10px;
        font-weight: 700;
    }
    .support_ticket_grid tr td:nth-child(3)::before {
        content: "Ticket Text:  ";
        margin-right: 10px;
        font-weight: 700;
    }
    .support_ticket_grid tr td:nth-child(4)::before {
        content: "Status:  ";
        margin-right: 10px;
        font-weight: 700;
    }

    .support_action_grid tr td:nth-child(1)::before {
        content: "Performed By:  ";
        margin-right: 10px;
        font-weight: 700;
    }

    .support_action_grid tr td:nth-child(2)::before {
        content: "Description:  ";
        margin-right: 10px;
        font-weight: 700;
    }

    .support_action_grid tr td:nth-child(3)::before {
        content: "Action Date:  ";
        margin-right: 10px;
        font-weight: 700;
    }

    .support_note_grid tr td:nth-child(1)::before {
        content: "Performed By:  ";
        margin-right: 10px;
        font-weight: 700;
    }

    .support_note_grid tr td:nth-child(2)::before {
        content: "Description:  ";
        margin-right: 10px;
        font-weight: 700;
    }

    .support_note_grid tr td:nth-child(3)::before {
        content: "Note Date:  ";
        margin-right: 10px;
        font-weight: 700;
    }


    /*Static pages (User Manual | Privacy Policy | Terms of ervice)*/
    .static_title {
        font-size: 42pt;
        margin:15px;
    }

    .static_sub_title {
        font-size: 36pt;
    }

    .static_section {
        font-size:30pt;
    }
}
@media only screen and (min-device-width:1081px) and (orientation:landscape) {
    .mobile_header, .collapser_icon, .collapsible_collapser{
        display:none;
    }
}