* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@-ms-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-webkit-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    min-width: 300px;
    font-family: "Muli", "Arial Unicode MS" !important;
    font-size: 18px;
    color: #5a5a5a;
}

a {
    cursor: pointer;
}

.loginbackground {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: url("../Images/UIImages/background.jpg") no-repeat center center
        fixed;
    background-size: cover;
}

.topPart {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    padding: 5px;
}

.logo {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 25px;
    text-align: left;
}

.logo .responsive-image {
    max-height: 150px;
    max-width: 150px;
}

.loginbox {
    /*position: relative;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 25px;*/
    /*align-items: flex-start;
    justify-content:center;
    position: relative;*/
    /*background-color: rgba(255, 255, 255, 0.9);
    height: 325px;*/
    align-items: flex-start;
    justify-content: flex-end;
    margin: 25px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
    height: 325px;
}

.loginboxH {
    align-items: flex-start;
    justify-content: flex-end;
    margin: 25px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
    height: 525px;
}

svg {
    position: absolute;
    right: 0;
    top: 0;
    width: 320px;
    height: 280px;
}

path {
    fill: none;
    stroke: #23b9ce;
    stroke-width: 4;
    stroke-dashoffset: 0;
    stroke-dasharray: 265 1120;
}

.logincontainer {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0px 0px 10px 0px;
    width: 400px;
    height: 300px;
}
.logincontainerH {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0px 0px 10px 0px;
    width: 400px;
    height: 500px;
}

.cixtranetlogo {
    margin: 10px;
    max-width: 180px;
}

.logindescription {
    font-size: 0.8em;
    margin: 20px 10px 20px 10px;
}

.loginusername {
    font-size: 0.8em;
    margin: 20px 10px 20px 10px;
}

.loginpassword {
    font-size: 0.8em;
    margin: 20px 10px 20px 10px;
}

.loginkeeploggedin {
    margin: 20px 10px 20px 10px;
    height: 23px;
}

.logincommands {
    margin: 20px 10px 0px 10px;
}

.logininvalidcredentials {
    margin: 0px 10px 0px 0px;
}

.slogan {
    font-family: "Century Gothic", "Arial Unicode MS";
    text-transform: uppercase;
    font-size: 1.3em;
    color: rgba(90, 90, 90, 1);
    position: relative;
    top: auto;
}

.username {
    font-family: "Muli", "Arial Unicode MS";
    padding: 6px 5px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid #cfcfcf;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    min-height: 28px;
    min-width: 150px;
    background-color: transparent;
}

.username:focus {
    border-bottom: 2px solid rgba(35, 185, 206, 1);
}

.username[data-error] {
    background-image: url("../Images/Icons/validation_error_small.png");
    background-position: left 5px center;
    background-repeat: no-repeat;
    border: 2px solid #ff5069;
    padding-left: 34px;
}

.password {
    font-family: "Muli", "Arial Unicode MS";
    padding: 6px 5px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid #cfcfcf;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    min-height: 28px;
    min-width: 150px;
    background-color: transparent;
}

.password:focus {
    border-bottom: 2px solid rgba(35, 185, 206, 1);
}

.password[data-error] {
    background-image: url("../Images/Icons/validation_error_small.png");
    background-position: left 5px center;
    background-repeat: no-repeat;
    border: 2px solid #ff5069;
    padding-left: 34px;
}

.passwordresetusername {
    font-family: "Muli", "Arial Unicode MS";
    padding: 6px 5px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid #cfcfcf;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    min-height: 28px;
    min-width: 150px;
    background-color: transparent;
}

.passwordresetusername:focus {
    border-bottom: 2px solid rgba(35, 185, 206, 1);
}

.passwordresetusername[data-error] {
    background-image: url("../Images/Icons/validation_error_small.png");
    background-position: left 5px center;
    background-repeat: no-repeat;
    border: 2px solid #ff5069;
    padding-left: 34px;
}

.mfacode {
    font-family: "Muli", "Arial Unicode MS";
    padding: 6px 5px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid #cfcfcf;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    min-height: 28px;
    min-width: 150px;
    background-color: transparent;
}

.mfacode:focus {
    border-bottom: 2px solid rgba(35, 185, 206, 1);
}

.mfacode[data-error] {
    background-image: url("../Images/Icons/validation_error_small.png");
    background-position: left 5px center;
    background-repeat: no-repeat;
    border: 2px solid #ff5069;
    padding-left: 34px;
}

.otpemailinput {
    font-family: "Muli", "Arial Unicode MS";
    padding: 6px 5px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid #cfcfcf;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    min-height: 28px;
    min-width: 150px;
    background-color: transparent;
}

.otpemailinput:focus {
    border-bottom: 2px solid rgba(35, 185, 206, 1);
}

.otpemailinput[data-error] {
    background-image: url("../Images/Icons/validation_error_small.png");
    background-position: left 5px center;
    background-repeat: no-repeat;
    border: 2px solid #ff5069;
    padding-left: 34px;
}

.otpnewpasswordinput {
    font-family: "Muli", "Arial Unicode MS";
    padding: 6px 5px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid #cfcfcf;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    min-height: 28px;
    min-width: 150px;
    background-color: transparent;
}

.otpnewpasswordinput:focus {
    border-bottom: 2px solid rgba(35, 185, 206, 1);
}

.otpnewpasswordinput[data-error] {
    background-image: url("../Images/Icons/validation_error_small.png");
    background-position: left 5px center;
    background-repeat: no-repeat;
    border: 2px solid #ff5069;
    padding-left: 34px;
}

.otpnewpasswordconfirm {
    font-family: "Muli", "Arial Unicode MS";
    padding: 6px 5px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid #cfcfcf;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    min-height: 28px;
    min-width: 150px;
    background-color: transparent;
}

.otpnewpasswordconfirm:focus {
    border-bottom: 2px solid rgba(35, 185, 206, 1);
}

.otpnewpasswordconfirm[data-error] {
    background-image: url("../Images/Icons/validation_error_small.png");
    background-position: left 5px center;
    background-repeat: no-repeat;
    border: 2px solid #ff5069;
    padding-left: 34px;
}

.linkbutton {
    display: inline-table;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    background-color: #23b9ce;
    padding: 3px 6px 3px 6px;
    min-height: 28px;
    min-width: 100px;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    border: 0px;
    font-family: "Muli", "Arial Unicode MS" !important;
    font-size: 1em;
    cursor: pointer;
    width: auto;
    border-radius: 4px;
    box-shadow:
        0px 1px 5px 0px rgba(0, 0, 0, 0.2),
        0px 2px 2px 0px rgba(0, 0, 0, 0.14),
        0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}

.linkbutton:hover {
    background-color: #0394af;
}

.linkbuttontext {
    font-size: 0.8em;
    color: rgba(90, 90, 90, 1);
    text-decoration: none;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    border: none;
    background: none;
    cursor: pointer;
}

.linkbuttontext:hover {
    color: #23b9ce;
}

.checkbox {
    position: relative;
}

.checkbox input[type="checkbox"] {
    visibility: hidden;
}

.checkbox label {
    cursor: pointer;
    position: absolute;
    width: 28px;
    height: 28px;
    top: 0;
    left: -3px;
    background-color: #ffffff;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    border: 2px solid #cfcfcf;
}

.checkbox label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: "";
    position: absolute;
    width: 10px;
    height: 4px;
    background: transparent;
    top: 7px;
    left: 6px;
    border: 3px solid #000000;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.checkbox label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.checkbox input[type="checkbox"]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    border: 3px solid #23b9ce;
    border-top: none;
    border-right: none;
}

.checkbox input[type="checkbox"]:checked + label {
    border: 2px solid #23b9ce;
}

.labelerror {
    font-size: 0.9em;
    color: #ff5069;
}

.buttonLoader {
    display: none;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    background-color: #23b9ce;
    padding: 3px 6px 3px 6px;
    min-height: 28px;
    min-width: 100px;
    border-radius: 4px;
    box-shadow:
        0px 1px 5px 0px rgba(0, 0, 0, 0.2),
        0px 2px 2px 0px rgba(0, 0, 0, 0.14),
        0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}

.input-error {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #ce3823;
    font-size: 0.7em;
}

@media only screen and (max-width: 1024px) {
    .logo {
        height: 50px;
        width: 50px;
        padding: 5px;
    }
}

@media only screen and (max-width: 620px) {
    .cixtranetlogocontainer {
        display: none;
    }

    .logincontainer {
        width: 300px;
    }
}

.middlePart {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.announcement {
    max-width: 640px;
    min-width: 340px;
    margin: 25px;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.8);
}

.announcementtitle {
    font-size: 1.6em;
    text-transform: uppercase;
    color: rgba(255, 105, 148, 1);
}

.bottomPart {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 5px;
}

.links {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 300px;
}

.links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.links ul li {
    flex: 0 0 auto;
    margin-left: 5px;
    margin-right: 5px;
    color: #5a5a5a;
}

.links ul li.filler {
    flex: 1 1 auto;
    min-width: 0px;
}

.links ul li a {
    color: #5a5a5a;
    text-decoration: none;
}

.links ul li span {
    color: #5a5a5a;
}

table.styled tr.styled {
    vertical-align: middle;
}

table.styled th,
table.styled td {
    padding: 4px 4px 4px 4px;
    height: 35px;
}

table.styled tr:nth-child(even) {
    background-color: #f2f2f2;
}

table.styled tr:nth-child(odd) {
    background-color: #d9d9d9;
}

.passwordresetoverlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

.passwordreset {
    width: 600px;
    height: auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    position: relative;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.passwordresettitle {
    height: 60px;
    -ms-flex: 0 0 75%;
    -webkit-flex: 0 0 75%;
    flex: 0 0 75%;
    font-size: 1.5em;
}

.passwordresetclose {
    height: 60px;
    -ms-flex: 0 0 25%;
    -webkit-flex: 0 0 25%;
    flex: 0 0 25%;
    text-align: right;
    text-decoration: none;
    color: #5a5a5a;
    -moz-transition: color 1s;
    -o-transition: color 1s;
    -webkit-transition: color 1s;
    transition: color 1s;
    font-size: 1.5em;
}

.passwordresetclose:hover {
    color: #ff5069;
}

.passwordresetusernamecontainer {
    width: 100%;
}

.resetpasswordnotallowed {
    -ms-flex: 0 0 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    margin: 25px 0px 25px 0px;
    color: rgba(255, 105, 148, 1);
}

.doresetpassword {
    -ms-flex: 0 0 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    margin: 25px 0px 25px 0px;
}

.passwordchanged {
    -ms-flex: 0 0 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    margin: 25px 0px 25px 0px;
    color: #12a83f;
}

.mfaoverlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.mfa {
    max-width: 600px;
    min-height: 200px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    position: relative;
    display: flex;
}

.mfatitle {
    font-size: 1.2em;
}

.mfacode {
    min-width: 0px;
}

.mfaresend {
    font-size: 0.8em;
    margin: 0;
}

.checkmfa {
}

.otpoverlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.otp {
    width: 600px;
    min-height: 200px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    position: relative;
    display: flex;
}

.otptitle {
    font-size: 1.2em;
}

.otphelp {
    font-size: 0.9em;
}

.otpemaillabel,
.otpnewpasswordlabel,
.otpnewpasswordconfirmlabel {
    font-size: 0.8em;
}

.passwordWeak {
    border-color: #fc5092;
}

.passwordWeakText {
    font-size: 0.7em;
    color: #fc5092;
}

.passwordNormal {
    border-color: #23b9ce;
}

.passwordNormalText {
    font-size: 0.7em;
    color: #23b9ce;
}

.passwordStrong {
    border-color: #23ce8e;
}

.passwordStrongText {
    font-size: 0.7em;
    color: #23ce8e;
}