/* Disable browser native edge scroll effects */
html, body {
    overscroll-behavior-x: contain;
}

body {
    margin: 0;
    font-family: Roboto;
    font-weight: 400;
    font-size: small;
    color: #555555;
    line-height: 125%;
}

* {
    box-sizing: border-box;
}

table {
    table-layout: fixed;
}

/*Links*/
A:link,
A:visited {
    color: #4599E5;
    text-decoration: none;
}

A:hover {
    color: #5BC1FF;
}

/*TextBox*/
input[type="text"],
input[type="password"],
textarea {
    height: 30px;
    border-radius: 5px;
    color: Black;
    font-size: medium;
    padding: 0px 10px 0px 10px;
    box-shadow: none;
    box-sizing: border-box;
    background-color: white;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: solid 1px #cccccc;
    outline: 2px solid transparent;
    transition: all 0.25s ease;
}

    input[type="text"]:hover,
    input[type="password"]:hover,
    textarea:hover {
        border: 1px solid #999999;
        outline: 1px solid #999999;
    }

    input[type="text"]:focus,
    input[type="password"]:focus,
    textarea:focus,
    input[type="text"]:active,
    input[type="password"]:active,
    textarea:active {
        border: solid 1px transparent;
        outline: 2px solid lightsteelblue;
        box-shadow: none;
        transition: all 0.0s ease;
    }

    /*TextBox with no styles*/
    input.TextBoxNoStyle,
    textarea.TextBoxNoStyle,
    input.TextBoxNoStyle:hover,
    textarea.TextBoxNoStyle:hover,
    input.TextBoxNoStyle:active,
    textarea.TextBoxNoStyle:active,
    input.TextBoxNoStyle:focus,
    textarea.TextBoxNoStyle:focus {
        height: 30px;
        border: none;
        outline: none;
        padding: 0px;
        box-shadow: none;
        box-sizing: border-box;
        background-color: transparent;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

.TextBoxAlignRight {
    text-align: right;
    border-radius: 5px;
    line-height: 20px;
    padding-left: 5px;
    font-size: medium;
}

/*DropDownList*/
select {
    background-position: right 5px center;
    height: 30px;
    border-radius: 5px;
    color: black;
    font-size: medium;
    padding: 0px 20px 0px 10px;
    box-shadow: none;
    box-sizing: border-box;
    background-color: white;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('Images/Down.png');
    background-size: auto 9px;
    background-repeat: no-repeat;
    border: solid 1px #cccccc;
    outline: 2px solid transparent;
    transition: all 0.25s ease;
}

    select:hover {
        border: 1px solid #999999;
        outline: 1px solid #999999;
    }

    select:focus,
    select:active {
        border: solid 1px transparent;
        outline: 2px solid lightsteelblue;
        box-shadow: none;
        transition: all 0.0s ease;
    }

/*Button*/
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background-color: #f0f0f0;
    color: #333333;
    font-size: medium;
    height: 35px;
    border: none;
    border-radius: 5px;
    transition: all 0.075s ease;
}

    button:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover {
        box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.1), 1px 1px 5px 0px rgba(0, 0, 0, 0.1);
    }

    button:active,
    input[type="button"]:active,
    input[type="submit"]:active,
    input[type="reset"]:active {
        transform: scale(0.9);
    }

/* Slim scroll bars */
.slim-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

    /* Chrome / Edge / Safari */
    .slim-scroll::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .slim-scroll::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .slim-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.15);
        border-radius: 10px;
        transition: background-color 0.2s ease, opacity 0.2s ease;
    }

    /* Hover (desktop only effect) */
    .slim-scroll:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.35);
    }

/*Hide overflow on single line. Gradient on right side*/
.HideOverflowRight {
    overflow: hidden;
    white-space: nowrap;
    /*text-overflow: ellipsis;*/
    min-width: 0;
    line-height: normal;
    text-align: left;
    -webkit-mask-image: linear-gradient(to right, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, black 95%, transparent 100%);
}

/*Hide form show sensitive text*/
.hideshowtext:hover {
    color: steelblue;
}

.hideshowtext {
    position: relative;
    width: 100%;
}

    .hideshowtext input {
        padding-right: 35px;
    }

    .hideshowtext span {
        color: #555555;
        position: absolute;
        font-size: 8px;
        font-weight: bold;
        right: 7px;
        top: 3px;
        cursor: default;
    }

        .hideshowtext span:hover {
            color: steelblue;
        }

/*Animation form progress loading...*/
.dotsanimation::after {
    content: "";
    animation: dotsanimation 1.5s steps(4, end) infinite;
}

@keyframes dotsanimation {
    0% {
        content: "";
    }

    25% {
        content: ".";
    }

    50% {
        content: "..";
    }

    75% {
        content: "...";
    }

    100% {
        content: "";
    }
}

@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto/Roboto-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto/Roboto-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto/Roboto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto/Roboto-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto/Roboto-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto/Roboto-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('Fonts/OpenSans/OpenSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}