@media (prefers-color-scheme: light) {
    body{
        margin: 0;
        max-width: 400px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        font-family: Arial, Helvetica, sans-serif;
        background-color: white;
    }

    .content{
        width: 100%;
        height: 100%;
        text-align: center;
        overflow: hidden;
    }

    a{
        text-decoration: none;
    }

    .logo-wrapper{
        width: 50%;
        margin: 10% 25%;
        margin-top: 25%;
    }

    .logo-wrapper img{
        width: 100%;
    }

    #text{
        display: block;
        color: white;
        background-color: orange;
        width: 50%;
        margin:0 22%;
        padding: 2%;
        border-radius: 10px;
        font-weight: bold;
        font-size: 100%;
        text-shadow: 4px 4px 4px black;
        box-shadow: 8px 8px 8px grey;
        outline: none;
    }

    .power-div{
        bottom: 0;
        width: 100%;
        font-size: 80%;
        font-weight: bold;
    }

    .image-wrapper{
        width: 40%;
        margin: 10% 30%;
    }

    .image-wrapper img{
        width: 100%;
        margin-top: 2%;
    }

    hr {
        border-top: dotted 1px; 
        color: grey;
    }

    .langwrapper {
        height: 35px;
        margin: 0 10px 0 0;
        float: right;
        width: 200px;
        display: inline-flex;
        text-align: center;
    }

    .languagebtn {
        align-items: center;
        background-color: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: .25rem;
        box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
        box-sizing: border-box;
        color: rgba(0, 0, 0, 0.85);
        cursor: pointer;
        display: inline-flex;
        font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 16px;
        font-weight: 600;
        justify-content: center;
        line-height: 1.25;
        margin: 0;
        min-height: 3rem;
        padding: calc(.875rem - 1px) calc(1.5rem - 1px);
        position: relative;
        text-decoration: none;
        transition: all 250ms;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: baseline;
        width: inherit;
        top: 7px;
    }

    .languagebtn:hover,
    .languagebtn:focus {
        border-color: rgba(0, 0, 0, 0.15);
        box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
        color: rgba(0, 0, 0, 0.65);
    }

    .languagebtn:hover {
        transform: translateY(-1px);
    }

    .languagebtn:active {
        background-color: #F0F0F1;
        border-color: rgba(0, 0, 0, 0.15);
        box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
        color: rgba(0, 0, 0, 0.65);
        transform: translateY(0);
    }

    .dropdown-language {
        display: none;
        position: absolute;
        background-color: whitesmoke;
        font-weight: lighter;
        width: 200px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        top: 55px;
    }

    .dropdown-language a {
        color: black;
        padding: 8px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-language a:hover {
        color: black;
        background-color: lightgrey;
    }

    .show {
        display: block;
    }

    #phonenodiv {
        display: block;
    }

    #phonenodiv, #phonenospandiv, #phonenobtndiv {
        text-align: center;
        padding: 10px;
        width: -webkit-fill-available;
    }

    #phonenospan {
        padding: 15px;
        font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 500;
        color: dimgray;
    }

    #phoneno, #tableno {
        height: 55px;
        max-width: 300px;
        width: 70%;
        padding: 0 20px;
        border-radius: 20px;
        border: 1px solid lightgray;
        letter-spacing: 2px;
        text-align: right;
    }

    #phoneprefix {
        position: absolute;
        height: 57px;
        padding: 0 20px;
        border-radius: 20px;
        border: 1px solid lightgray;
        letter-spacing: 2px;
        background: none;
    }

    #phonenobtn, #tablenobtn {
        height: 50px;
        max-width: 300px;
        width: 82%;
        padding: 14px 20px;
        border-radius: 5px;
        border: 1px solid orange;
        background: bisque;
        font-weight: 800;
        color: darkorange;
        text-transform: uppercase;
    }
    
    #tablenobtn:disabled {
        opacity: 0.5;
    }

    .example-modal{
        background: rgba(90, 90, 90, 0.5);
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 9999;
        width: 100%;
        right: 0;
    }

    #tablenodiv {
        display: none;
    }

    .example-modal .modal { 
        max-width: 400px;
        width: 95%;
        height: fit-content;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: transparent!important;
        display: block;    
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 1040;
        overflow: hidden;
    }

    .modal-body {
        justify-content: space-between;
        display: flex;
        position: relative;
        padding: 15px;
    }

    .modal-dialog {
        position: relative;
        margin: 30px auto;
    }

    .modal-content {
        box-shadow: 0 2px 3px rgba(0,0,0,0.125) !important;
        position: relative;
        background-color: #fff;
    }

    .modal-header {
        border-bottom-color: #f4f4f4;
        min-height: 16.43px;
        padding: 15px;
        border-bottom: 1px solid #e5e5e5;
    }

    .modal-footer {
        border-top-color: #f4f4f4;
        padding: 15px;
        text-align: right;
        border-top: 1px solid #e5e5e5;
    }

    .btncancel {
        background: none;
        border: none;
        width: 100%;
        text-align: right;
    }
    
    #ErrorText {
        display: none;
    }

    #errortxt {
        background: darkred;
        color: white;
        letter-spacing: 1px;
        padding: 10px;
        word-break: break-word;
        display: block;
    }
}

@media (prefers-color-scheme: dark) {
    body{
        margin: 0;
        max-width: 400px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        font-family: Arial, Helvetica, sans-serif;
        background-color: white;
    }

    .content{
        width: 100%;
        height: 100%;
        text-align: center;
        overflow: hidden;
    }

    a{
        text-decoration: none;
    }

    .logo-wrapper{
        width: 50%;
        margin: 10% 25%;
        margin-top: 25%;
    }

    .logo-wrapper img{
        width: 100%;
    }

    #text{
        display: block;
        color: white;
        background-color: orange;
        width: 50%;
        margin:0 22%;
        padding: 2%;
        border-radius: 10px;
        font-weight: bold;
        font-size: 100%;
        text-shadow: 4px 4px 4px black;
        box-shadow: 8px 8px 8px grey;
        outline: none;
    }

    .power-div{
        bottom: 0;
        width: 100%;
        font-size: 80%;
        font-weight: bold;
    }

    .image-wrapper{
        width: 40%;
        margin: 10% 30%;
    }

    .image-wrapper img{
        width: 100%;
        margin-top: 2%;
    }

    hr {
        border-top: dotted 1px; 
        color: grey;
    }

    .langwrapper {
        height: 35px;
        margin: 0 10px 0 0;
        float: right;
        width: 200px;
        display: inline-flex;
        text-align: center;
    }

    .languagebtn {
        align-items: center;
        background-color: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: .25rem;
        box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
        box-sizing: border-box;
        color: rgba(0, 0, 0, 0.85);
        cursor: pointer;
        display: inline-flex;
        font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 16px;
        font-weight: 600;
        justify-content: center;
        line-height: 1.25;
        margin: 0;
        min-height: 3rem;
        padding: calc(.875rem - 1px) calc(1.5rem - 1px);
        position: relative;
        text-decoration: none;
        transition: all 250ms;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: baseline;
        width: inherit;
        top: 7px;
    }

    .languagebtn:hover,
    .languagebtn:focus {
        border-color: rgba(0, 0, 0, 0.15);
        box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
        color: rgba(0, 0, 0, 0.65);
    }

    .languagebtn:hover {
        transform: translateY(-1px);
    }

    .languagebtn:active {
        background-color: #F0F0F1;
        border-color: rgba(0, 0, 0, 0.15);
        box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
        color: rgba(0, 0, 0, 0.65);
        transform: translateY(0);
    }

    .dropdown-language {
        display: none;
        position: absolute;
        background-color: whitesmoke;
        font-weight: lighter;
        width: 200px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        top: 55px;
    }

    .dropdown-language a {
        color: black;
        padding: 8px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-language a:hover {
        color: black;
        background-color: lightgrey;
    }

    .show {
        display: block;
    }

    #phonenodiv {
        display: block;
    }

    #phonenodiv, #phonenospandiv, #phonenobtndiv {
        text-align: center;
        padding: 10px;
        width: -webkit-fill-available;
    }

    #phonenospan {
        padding: 15px;
        font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 500;
        color: dimgray;
    }

    #phoneno, #tableno {
        height: 55px;
        max-width: 300px;
        width: 70%;
        padding: 0 20px;
        border-radius: 20px;
        border: 1px solid lightgray;
        letter-spacing: 2px;
        text-align: right;
    }

    #phoneprefix {
        position: absolute;
        height: 57px;
        padding: 0 20px;
        border-radius: 20px;
        border: 1px solid lightgray;
        letter-spacing: 2px;
        background: none;
    }

    #phonenobtn, #tablenobtn {
        height: 50px;
        max-width: 300px;
        width: 82%;
        padding: 14px 20px;
        border-radius: 5px;
        border: 1px solid orange;
        background: bisque;
        font-weight: 800;
        color: darkorange;
        text-transform: uppercase;
    }

    .example-modal{
        background: rgba(90, 90, 90, 0.5);
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 9999;
        width: 100%;
        right: 0;
    }

    #tablenodiv {
        display: none;
    }

    .example-modal .modal { 
        max-width: 400px;
        width: 95%;
        height: fit-content;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: transparent!important;
        display: block;    
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 1040;
        overflow: hidden;
    }

    .modal-body {
        justify-content: space-between;
        display: flex;
        position: relative;
        padding: 15px;
    }

    .modal-dialog {
        position: relative;
        margin: 30px auto;
    }

    .modal-content {
        box-shadow: 0 2px 3px rgba(0,0,0,0.125) !important;
        position: relative;
        background-color: #fff;
    }

    .modal-header {
        border-bottom-color: #f4f4f4;
        min-height: 16.43px;
        padding: 15px;
        border-bottom: 1px solid #e5e5e5;
    }

    .modal-footer {
        border-top-color: #f4f4f4;
        padding: 15px;
        text-align: right;
        border-top: 1px solid #e5e5e5;
    }

    .btncancel {
        background: none;
        border: none;
        width: 100%;
        text-align: right;
    }
    
    #ErrorText {
        display: none;
    }

    #errortxt {
        background: darkred;
        color: white;
        letter-spacing: 1px;
        padding: 10px;
        word-break: break-word;
        display: block;
    }
}