@font-face {
    font-family: 'vox light';
    src: url('../../fonts/EuclidSquare-Light-WebS.eot') format('embedded-opentype');
    src: url('../../fonts/EuclidSquare-Light-WebS.eot?#iefix') format('embedded-opentype'), url('../../fonts/EuclidSquare-Light-WebS.woff2') format('woff2'), url('../../fonts/EuclidSquare-Light-WebS.woff') format('woff'), url('../../fonts/EuclidSquare-Light-WebS.ttf') format('truetype'), url('../../fonts/EuclidSquare-Light-WebS.svg#Font') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'vox regular';
    src: url('../../fonts/EuclidSquare-Regular-WebS.eot') format('embedded-opentype');
    src: url('../../fonts/EuclidSquare-Regular-WebS.eot?#iefix') format('embedded-opentype'), url('../../fonts/EuclidSquare-Regular-WebS.woff2') format('woff2'), url('../../fonts/EuclidSquare-Regular-WebS.woff') format('woff'), url('../../fonts/EuclidSquare-Regular-WebS.ttf') format('truetype'), url('../../fonts/EuclidSquare-Regular-WebS.svg#Font') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'vox medium';
    src: url('../../fonts/EuclidSquare-Medium-WebS.eot') format('embedded-opentype');
    src: url('../../fonts/EuclidSquare-Medium-WebS.eot?#iefix') format('embedded-opentype'), url('../../fonts/EuclidSquare-Medium-WebS.woff2') format('woff2'), url('../../fonts/EuclidSquare-Medium-WebS.woff') format('woff'), url('../../fonts/EuclidSquare-Medium-WebS.ttf') format('truetype'), url('../../fonts/EuclidSquare-Medium-WebS.svg#Font') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'vox semibold';
    src: url('../../fonts/EuclidSquare-Semibold-WebS.eot') format('embedded-opentype');
    src: url('../../fonts/EuclidSquare-Semibold-WebS.eot?#iefix') format('embedded-opentype'), url('../../fonts/EuclidSquare-Semibold-WebS.woff2') format('woff2'), url('../../fonts/EuclidSquare-Semibold-WebS.woff') format('woff'), url('../../fonts/EuclidSquare-Semibold-WebS.ttf') format('truetype'), url('../../fonts/EuclidSquare-Semibold-WebS.svg#Font') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'vox bold';
    src: url('../../fonts/EuclidSquare-Bold-WebS.eot') format('embedded-opentype');
    src: url('../../fonts/EuclidSquare-Bold-WebS.eot?#iefix') format('embedded-opentype'), url('../../fonts/EuclidSquare-Bold-WebS.woff2') format('woff2'), url('../../fonts/EuclidSquare-Bold-WebS.woff') format('woff'), url('../../fonts/EuclidSquare-Bold-WebS.ttf') format('truetype'), url('../../fonts/EuclidSquare-Bold-WebS.svg#Font') format('svg');
    font-weight: normal;
    font-style: normal;
}
html {
    height: 100%;
    max-height: 100%;
}
body {
    height: 100%;
    max-width: 100%;
    font-family: 'vox regular', sans-serif;
    color: #313131;
    background: #F6F9FC;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.drop-shadow {
    border: 1px solid #ffffff;
    box-shadow: 0px 3px 6px #dfdfdf;
}
.card {
    background: #ffffff 0% 0% no-repeat padding-box;
    border-radius: 10px;
}
header#auth {
    margin-top: 45px;
    margin-bottom: 25px;
}
header#auth #logo {
	background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 600 160' style='enable-background:new 0 0 600 160;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23313131;} .st1{fill:%23313131;} %3C/style%3E%3Cpath class='st0' d='M80,160c-44.2,0-80-35.8-80-80S35.8,0,80,0s80,35.8,80,80S124.2,160,80,160L80,160z M65.1,34.2 c-1.7-1.7-3.7-2.6-6.3-2.6c-2.6,0-4.7,0.9-6.6,2.6c-1.7,1.8-2.5,3.9-2.6,6.4c0,2.6,0.8,4.7,2.4,6.4c1.7,1.7,3.9,2.5,6.4,2.5 c2.5,0,4.7-0.8,6.6-2.5c1.8-1.7,2.9-3.8,2.9-6.4C67.8,38.1,66.9,36.1,65.1,34.2L65.1,34.2z M123,66.1c-5.9-13.9-22.4-13.3-33.6-6.8 c-11.2,6.4-18.1,18.5-19.4,30.1c-0.4,4-0.2,7.9,0.8,11.4c-6.6,8.4-17.7,13-15.5,1.5C58,88,60.8,75.7,64.6,55.4h-0.3l0.3-0.2h-21 l-7.8,10.3H46l-5.8,27.9c-5.6,28.1,18.8,27.8,32.5,11.9c2.3,4.2,6,7.6,11.3,9.5c14.2,5.4,39.1-4.1,40.6-40 C124.6,72.8,123.9,68.4,123,66.1L123,66.1z M93.2,107.7c-5.1-1.1-7.2-12-4.7-24.5c2.6-12.5,8.8-21.7,13.9-20.6 c5.1,1.1,7.2,12,4.7,24.5C104.5,99.5,98.3,108.7,93.2,107.7L93.2,107.7z'/%3E%3Cpath class='st1' d='M205.5,40.3c-7.1,0-13-5.9-13-13c0-7.3,5.9-13,13-13c7.3,0,13.2,5.7,13.2,13C218.7,34.4,212.8,40.3,205.5,40.3 L205.5,40.3z M215.3,146.3h-19.6V55h19.6V146.3L215.3,146.3z M275,146.3c-26.4,0-46.8-20.5-46.8-46.4s20.4-46.4,46.8-46.4 c26.4,0,46.8,20.5,46.8,46.4S301.5,146.3,275,146.3L275,146.3z M275,71.7c-15.9,0-27,12.3-27,28.2c0,15.9,11.1,28.2,27,28.2 c15.7,0,26.8-12.3,26.8-28.2C301.8,84,290.7,71.7,275,71.7L275,71.7z M368.1,146.3L317.2,55H340l28.1,53.1L396.2,55h22.8 L368.1,146.3L368.1,146.3z M461.2,146.3c-26.4,0-46.8-20.5-46.8-46.4s20.4-46.4,46.8-46.4c26.4,0,46.8,20.5,46.8,46.4 S487.6,146.3,461.2,146.3L461.2,146.3z M461.2,71.7c-15.9,0-27,12.3-27,28.2c0,15.9,11.1,28.2,27,28.2c15.7,0,26.8-12.3,26.8-28.2 C488,84,476.9,71.7,461.2,71.7L461.2,71.7z M600,144.7h-23.6l-24.2-30.3l-23.9,30.3h-24.5l35.8-44.6L505.5,55h24.5l22,30.3L574.7,55 h23.6l-33.9,45.1L600,144.7L600,144.7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
    background-position: center;
    height: 30px;
}
section#content .card-column {
    max-width: 390px;
}
section#content .flat-column {
    max-width: 550px;
}
h1 {
    font-family: 'vox regular', sans-serif;
    color: #313131;
    font-size: 25px;
}
h2 {
    font-family: 'vox regular', sans-serif;
    color: #313131;
    font-size: 22px;
}
a {
    color: #31aae2;
    text-decoration: underline;
}
a:hover {
    color: #31aae2;
}
.card {
    color: #83888c;
}
.card #login-image {
    background: url('../../images/app-icons/coco-wizard.png') no-repeat;
    background-position: center;
    background-size: 90%;
    height: 120px;
    width: 120px;
    margin: 0 auto;
}
.card .byline {
    color: #83888c;
    font-size: 15px;
}
form .form-group {
    position: relative;
    padding: 10px 0px;
}
form .form-group label {
    position: absolute;
    top: -5px;
    left: 15px;
    z-index: 50;
    background-color: white;
    padding: 5px;
    color: #83888c;
    font-size: 11px;
}
form .form-group input[type="text"],
form .form-group input[type="email"],
form .form-group input[type="password"] {
    border-radius: 40px;
}
form .form-group input[type="text"] + .input-group-append,
form .form-group input[type="email"] + .input-group-append,
form .form-group input[type="password"] + .input-group-append {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
form .form-group input[type="text"] + .input-group-append button,
form .form-group input[type="email"] + .input-group-append button,
form .form-group input[type="password"] + .input-group-append button {
    background-color: #31aae2;
    color: #ffffff;
    width: 75px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    border-color: #ced4da;
}
form .form-group input[type="text"] + .input-group-append button:focus,
form .form-group input[type="email"] + .input-group-append button:focus,
form .form-group input[type="password"] + .input-group-append button:focus,
form .form-group input[type="text"] + .input-group-append button:active,
form .form-group input[type="email"] + .input-group-append button:active,
form .form-group input[type="password"] + .input-group-append button:active,
form .form-group input[type="text"] + .input-group-append button:focus:active,
form .form-group input[type="email"] + .input-group-append button:focus:active,
form .form-group input[type="password"] + .input-group-append button:focus:active {
    box-shadow: none;
    background-color: #31aae2;
    color: #ffffff;
}
form .form-group.invalid input[type="text"],
form .form-group.invalid input[type="email"],
form .form-group.invalid input[type="password"] {
    border-color: red;
}
form .form-group.invalid label {
    color: red;
}
form .blue-button {
    background-color: #31aae2;
    border-radius: 40px;
    line-height: 35px;
    height: 35px;
    width: 100%;
    font-size: 15px;
    color: #ffffff;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
form .blue-button:hover:enabled {
    color: #ffffff;
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
}
form .blue-button.cancel {
    color: #ffffff;
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
}
form .blue-button.cancel:visited {
    color: #31aae2;
}
ul.dynamic-list li {
    color: #83888c;
    position: relative;
    margin-left: 25px;
    padding: 3px 0;
}
ul.dynamic-list li:before {
    font-family: FontAwesome, "FontAwesome";
    font-size: 6px;
    content: "";
    margin: 0 5px 0 5px;
    color: #83888c;
    position: absolute;
    left: -24px;
    top: 8px;
    height: 20px;
    width: 20px;
    background-image: url("../../images/sprite.png");
    background-repeat: no-repeat;
    background-size: 1000%;
    background-position-x: -154px;
    background-position-y: -620px;
}
ul.dynamic-list li.valid:before {
    content: "";
    font-size: 12px;
    left: -25px;
    top: 5px;
    color: #3ae0a9;
    height: 15px;
    width: 15px;
    background-image: url("../../images/icons/validation-check.png");
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: center;
}
ul.dynamic-list li.invalid:before {
    content: "";
    font-size: 12px;
    top: 5px;
    left: -26px;
    color: #f67363;
    height: 15px;
    width: 15px;
    background-image: url("../../images/icons/validation-cross.png");
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: center;
}
#toggle-password {
    width: 90px;
    white-space: nowrap;
    text-align:center;
}

/* Welcome Screen CSS */
.welcomeCont {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.welcomeBrand {
    width: 100%;
    position: fixed;
    text-align: center;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    margin: 0 auto;
}
.welcomeCont .iovoxLogo {
    display: inline-block;
    width: 70.9px;
    height: 88.1px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70.942' height='88.164' viewBox='0 0 70.942 88.164'%3E%3Cg id='logo-circle-2' transform='translate(7)'%3E%3Cpath id='Path_35765' data-name='Path 35765' d='M30.675,61.35A30.675,30.675,0,1,1,61.35,30.675,30.666,30.666,0,0,1,30.675,61.35ZM24.962,13.113a3.237,3.237,0,0,0-2.416-1,3.408,3.408,0,0,0-3.528,3.451,3.419,3.419,0,0,0,.92,2.454,3.353,3.353,0,0,0,2.454.959,3.662,3.662,0,0,0,2.531-.959,3.282,3.282,0,0,0,1.112-2.454,3.6,3.6,0,0,0-1.074-2.454Zm22.2,12.232c-2.262-5.33-8.589-5.1-12.883-2.607A15.51,15.51,0,0,0,26.84,34.279a11.755,11.755,0,0,0,.307,4.371c-2.531,3.221-6.787,4.985-5.943.575,1.035-5.483,2.109-10.2,3.566-17.983h-.115l.115-.077H16.718l-2.991,3.949h3.911l-2.224,10.7c-2.147,10.775,7.209,10.659,12.462,4.563a7.8,7.8,0,0,0,4.333,3.643c5.445,2.071,14.992-1.572,15.567-15.337a12.079,12.079,0,0,0-.613-3.336ZM35.736,41.3c-1.956-.422-2.761-4.6-1.8-9.394,1-4.793,3.374-8.321,5.33-7.9s2.761,4.6,1.8,9.394c-1,4.755-3.374,8.282-5.33,7.9Z' transform='translate(-1.632)' fill='%23fff'/%3E%3Cpath id='Path_35886' data-name='Path 35886' d='M194.763,18.826a2.263,2.263,0,1,1,2.3-2.263,2.281,2.281,0,0,1-2.3,2.263Zm1.706,18.454h-3.412V21.386h3.412V37.28Zm10.393,0A8.078,8.078,0,1,1,215.01,29.2a8.023,8.023,0,0,1-8.147,8.078Zm0-12.987a4.668,4.668,0,0,0-4.7,4.909,4.688,4.688,0,1,0,9.366,0,4.661,4.661,0,0,0-4.666-4.909ZM223.071,37.28l-8.861-15.895h3.969l4.892,9.244,4.892-9.244h3.969L223.071,37.28Zm16.208,0a8.078,8.078,0,1,1,8.147-8.078,8.023,8.023,0,0,1-8.147,8.078Zm0-12.987a4.668,4.668,0,0,0-4.7,4.909,4.688,4.688,0,1,0,9.366,0,4.661,4.661,0,0,0-4.666-4.909ZM263.442,37h-4.109l-4.213-5.275L250.96,37h-4.265l6.232-7.765-5.937-7.852h4.265l3.83,5.275,3.952-5.275h4.109l-5.9,7.852,6.2,7.765Z' transform='translate(-199.5 50.884)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    color: transparent;
    text-indent: -999em;
}
.welcomeOptions {
    width: 100%;
    position: fixed;
    text-align: center;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    margin: 0 auto;
    padding: 0 20px;
}
.welcomeBtn {
    padding: 14px 20px;
    border-radius: 4px;
    border: 0;
    font-family: 'vox regular', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
    text-shadow: none;
    transition: all 150ms ease-in-out;
    box-shadow: none;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    margin-left: 4px;
    margin-right: 4px;
    letter-spacing: 1px;
    width: 100%;
    max-width: 300px;
}
.welcomeCont .logInBtn {
    background: #fff;
    color: #31aae2;
}
.welcomeCont .logInBtn:hover {
    background: #31aae2;
    color: #fff;
    transition: all 150ms ease-in-out;
}
.welcomeCont .signInBtn {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}
.welcomeCont .signInBtn:hover {
    background: #31aae2;
    color: #fff;
    border: 2px solid #31aae2;
    transition: all 150ms ease-in-out;
}