* {
   /*box-sizing: border-box;*/
}
.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    background-color: #205493;
    border-radius: 15px;
    padding: 10px;
}
.container-flex {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    height: 200px; /* Optional: Set a height to see vertical centering */
    border: 1px solid #ccc;
}

img {
    position: relative;
    bottom: 1px;
    right: 0px;
    max-width: 100%;
    height: 119px;
    width: 168px;
}
/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 35%;
    /*padding: 10px;*/
    height: 90vh; /* 300px; /* Should be removed. Only for demonstration */
    display: block;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

/* Create two equal columns that floats next to each other */
.column2 {
    float: left;
    width: 65%;
    /*padding: 10px;*/
    height: 100vh; /*300px; /* Should be removed. Only for demonstration */
    background-color: silver;
    background: url( '..//images/uploadbackground3.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

}

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


.OKTAButton {
    border: 2px solid white; /*#868686;*/
    border-radius: 5px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    padding: 10px 10px 10px 25px;
    background-color: navy; /*#0A2240;*/
    width: 70% !important;
    text-align: center;
    cursor: pointer;
}

h1 {
    font-family: 'EB Garamond', Verdana, Arial;
    font-size: 2em;
    color: black;
    text-align: center;
    font-weight: bold;
}


h2 {
    text-align: center;
    font-size: 1.2em;
    color: white;
    font-family: 'EB Garamond', Verdana, Arial;
}

h3 {
    text-align: center;
    font-size: 1em;
    color: black;
    font-family: 'EB Garamond', Verdana, Arial;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media only screen and (min-width: 340px) and (max-width: 768px) { /*600px */
    .column {
        width: 100%;
        height: 30vh;
    }

    .column2 {
        width: 100%;
        height: 70vh;
        background-image:none;
    }

    img {
        position: relative;
        bottom: 1px;
        right: 0px;
        max-width: 70px;
        height: 70px;
    }

    .OKTAButton {
        border: 2px solid white; /*#868686;*/
        border-radius: 5px;
        color: white;
        font-weight: bold;
        font-size: 1.2em;
        padding: 10px 10px 10px 25px;
        background-color: navy; /*#0A2240;*/
        width: 35% !important;
        text-align: center;
        cursor: pointer;
    }

    h1 {
        text-align: center;
        font-size: 1.2em;
        color: black;
        font-family: 'EB Garamond', Verdana, Arial;
    }

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media only screen and (max-width: 339px){ /*600px */
    .column {
        width: 100%;
        height: 100vh;
    }

    .column2 {
        width: 100%;
        height: 0vh;
        background-image: none;
    }

    img {
        display:none;
    }

    .OKTAButton {
        border: 2px solid white; /*#868686;*/
        border-radius: 5px;
        color: white;
        font-weight: bold;
        font-size: 1.2em;
        padding: 10px 10px 10px 25px;
        background-color: navy; /*#0A2240;*/
        width: 80px;
        text-align: center;
        cursor: pointer;
    }

    h1 {
        text-align: center;
        font-size: 1.2em;
        color: black;
        font-family: 'EB Garamond', Verdana, Arial;
    }
}




    A {
        color: black;
        text-decoration: none;
    }

        A:Visited {
            color: black;
            font-weight: bold;
        }

        /* mouse over link */
        A:hover {
            color: black;
            text-decoration: underline;
            cursor:pointer;
        }

        /* selected link */
        A:active {
            color: black;
        }

    .centerdiv {
        text-align: center;
    }


    .Disappear {
        display: none;
    }




    .mobilelabel {
        /*font-size: 3em;*/
        text-align: left;
        color: white;
        font-weight: Normal;
        font-family: 'Open Sans';
    }

    .mobilelabel2 {
        text-align: left;
        color: white;
        font-family: 'Open Sans';
        font-weight: bold;
    }

    .mobiletext {
        /*height: 42px;*/
        font-size: 1.2em;
        font-family: 'Open Sans';
        max-width: 100%;
    }

    .mobiletext1 {
        height: 28px;
        font-family: 'Open Sans';
        max-width: 100%;
    }

    .mobiletext2 {
        height: 32px;
        font-size: 22px;
        font-family: 'Open Sans';
        font-weight: bold;
        color: red;
    }

    .mobiletext3 {
        height: 32px;
        font-size: 1.2em;
        font-family: 'Open Sans';
        max-width: 96%;
    }

    .mobiletext4 {
        height: 30px;
        font-size: .5em;
        font-family: 'Open Sans';
        max-width: 90%;
    }

    .mobiletextmulti {
        height: 100px;
        font-size: 1.2em;
        font-family: 'Open Sans';
        max-width: 80%;
    }

    .mobiletextupload {
        height: 30px;
        font-size: 1.2em;
        font-family: 'Open Sans';
        max-width: 80%;
    }

    .spacer {
        height: 30px;
    }

    .spacer2 {
        height: 60px;
    }

    .spacersmall {
        height: 10px;
    }
   
   
  
    .whiteout {
        background-color: silver;
    }

    .whiteLetters {
        color: white !important;
    }

    .fivePad {
        padding: 5px;
    }

    .padding2by2 {
        padding-left: 2px;
        padding-top: 2px;
    }

    .fortyHeight {
        height: 40px;
    }

    .loginBanner {
        width: 50% !important;
        height: auto !important;
        max-height: auto;
        max-width: 100%;
        background-size: 100%;
        /*src ="~/images/transfertitle2.wep"*/
    }

    .bannerMetrics {
        width: 50% !important;
        height: auto !important;
        max-height: 100px;
        max-width: 100%;
        background-size: 100%;
    }

    .shadedbanner {
        background: white; /*#0A2240;*/
        text-align: center;
    }

    .whiteBackandSize {
        color: white;
        font-size: 1em;
    }

    .gridMasterText {
        font: normal 11px Tahoma !important;
    }

    .whitePadding3 {
        font-size: 3em;
        color: white !important;
    }


    .container-flex {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */
        height: 100vh; /* Ensures the container spans the full viewport height */
        width: 100vw; /* Ensures the container spans the full viewport width */
    }

    .container {
        display: grid;
        place-items: center; /* Centers both horizontally and vertically */
        height: 100vh;
        width: 100vw;
    }

    .darkened-background {
        /* Layer a semi-transparent black gradient over the image */
        background-image: linear-gradient( rgba(0, 0, 0, 0.5), /* Start with 50% opaque black */
        rgba(0, 0, 0, 0.5) /* End with 50% opaque black */
        ), url("../images/uploadbackground2.png"); /* Specify your background image */
        /* Additional background properties for positioning/sizing */
        background-size: cover;
        background-position: center center;
        height: 100vh; /* Example height */
        color: white; /* Ensure text color provides good contrast */
        /*font-size: 2em;*/
        background-attachment: fixed;
    }
    
    /* container */
    /* flexbox container */
    .left-sidebar-flexbox {
        display: flex;
        flex-wrap: wrap;
    }

        /* columns (mobile) */
        .left-sidebar-flexbox > * {
            width: 100%;
            padding: 1rem;
        }

        /* background colors */
        .left-sidebar-flexbox > .header {
            background: #f97171
        }

        .left-sidebar-flexbox > .main-content {
            background: #fff
        }

        .left-sidebar-flexbox > .left-sidebar {
            background: #f5d55f
        }

        .left-sidebar-flexbox > .footer {
            background: #72c2f1
        }

    /* tablet breakpoint */
    @media (min-width:768px) {
        .left-sidebar-flexbox > .header {
            order: -2; /* header first */
        }

        .left-sidebar-flexbox > .left-sidebar {
            /* left sidebar before main content */
            order: -1;
            width: calc(100% / 3);
        }

        .left-sidebar-flexbox > .main-content {
            width: calc(100% / 3 * 2);
        }
    }