@import url("https://use.typekit.net/xdx1efn.css");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    font-weight: 400;
    font-size: 0.875rem;
    background-color: rgb(9, 52, 79);
   

}

input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgb(9, 52, 79) inset !important;
}

input:-webkit-autofill {
    -webkit-text-fill-color: white !important;
}

::-webkit-input-placeholder {
    /* Edge */
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
    font-size: 10px;
    font-weight: 300;
}

:-ms-input-placeholder {
    /* Internet Explorer */
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
    font-size: 12px;
    font-weight: 300;
}

::placeholder {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
    font-size: 12px;
    font-weight: 300;
}

.container {
    background-color: #FFF;
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: row;
    background-image: url("login_bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    margin: 50px;

}

.brand-content {
    width: 500px;
    background: rgba(9, 52, 79, 0.85);
    display: flex;
    flex-direction: column;

    margin-left: 50px;
    margin-bottom: -50px;

}


.brand-content h1 {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #FFF;
    display: block;
    letter-spacing: 3px;
    text-align: center;
}

.brand-content p {
    font-weight: 400;
    text-transform: uppercase;
    color: #FFF;
    display: block;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 3px;
}

.form-content {
    transition: all 0.5s ease;
    width: 100%;
	flex-direction: column;

    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;


}

.logo {
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 80px 32px;
    flex: 1 1 0%;
    align-items: center;

}

.logo img {
    width: 100%;
}

.notice-container {
  padding: 15px;
  background-color: rgba(9, 52, 79, 0.85);
  width: 400px;
}
.notice-content {
  display: flex;
  align-items: center;
  gap: 15px;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 18px;
}
.notice-icon {
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
  flex-shrink: 0;
}
.notice-text {
  flex: 1;
}
.notice-title {
  font-weight: 300;
  margin: 0;
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.12rem;
}
.notice-description {
  margin: 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 300;
}

.brand-bg {

    height: 500px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjQuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Imdlb21ldHJpY19jdWJlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTMxLjMgNTQwLjMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEzMS4zIDU0MC4zOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6bm9uZTt9Cgkuc3Qxe2ZpbGw6IzM5OTJDRjt9Cjwvc3R5bGU+CjxsaW5lIGNsYXNzPSJzdDAiIHgxPSIwLjMiIHkxPSIxNjQiIHgyPSIzMi40IiB5Mj0iMTQ3LjkiLz4KPHBhdGggY2xhc3M9InN0MSIgZD0iTTEzMS44LDUyNC4zbC0wLjUtMC4zdi0zMi4ybDAuNSwwLjN2LTAuN2wtMC4xLDBsMC4xLDB2LTAuNWwtMC41LDAuM3YtMzIuMmwwLjUtMC4zdi0wLjdsLTAuOCwwLjRsLTMyLTE2CglsMzItMTZsMC44LDAuNHYtMC41bC0wLjUtMC4zdi0zMi4ybDAuNSwwLjNWMzkzbC0wLjEsMGwwLjEsMHYtMC41bC0wLjUsMC4zdi0zMi4ybDAuNS0wLjN2LTAuN2wtMC44LDAuNGwtMzItMTZsMzItMTZsMC44LDAuNHYtMC41CglsLTAuNS0wLjN2LTMyLjJsMC41LDAuM3YtMC43bC0wLjEsMGwwLjEsMHYtMC41bC0wLjUsMC4zdi0zMi4ybDAuNS0wLjN2LTAuOGwtMC44LDAuNGwtMzItMTZsMzItMTZsMC44LDAuNHYtMC41bC0wLjUtMC4zVjE5NwoJbDAuNSwwLjN2LTEuM2wtMC41LDAuM1YxNjRsMC41LTAuM1YxNjNsLTAuOCwwLjRsLTMyLTE2bDMyLTE2bDAuOCwwLjR2LTAuNWwtMC41LTAuM1Y5OC44bDAuNSwwLjN2LTEuNGwtMC41LDAuMlY2NS44bDAuNS0wLjN2LTAuOAoJbC0wLjgsMC40bC0zMi0xNmwzMi0xNmwwLjgsMC40VjMzbC0wLjUtMC4zVjAuNWwwLjUsMC4zVjBoLTAuNWwtMzIsMTZsLTMyLTE2aC0xLjRsLTMyLDE2TDAuNywwSDB2MzMuMWwzMiwxNmwtMzIsMTZ2NjYuMWwzMiwxNi4xCglsLTMyLDE2djY2LjFsMzIsMTYuMWwtMzIsMTZ2NjYuMWwzMiwxNi4xbC0zMiwxNlY0MjZsMzIsMTYuMWwtMzIsMTZ2NjYuMWwzMiwxNi4xaDEuNGwzMi0xNmwzMiwxNkg5OWwzMi0xNmwwLjgsMC40VjUyNC4zegoJIE0xMzAuNyw0MjUuOGwtMzIuMSwxNi4xdi0zMi4ybDMyLjEtMTYuMVY0MjUuOHogTTMzLjUsMjQ1LjZsMzItMTZsMzIsMTZsLTMyLDE2TDMzLjUsMjQ1LjZ6IE02NS4yLDI2Mi4zdjMyLjJsLTMyLjEtMTYuMXYtMzIuMgoJTDY1LjIsMjYyLjN6IE0zMy4xLDI0NS4zdi0zMi4yTDY1LjIsMTk3djMyLjJMMzMuMSwyNDUuM3ogTTY1LjgsMjI5LjJWMTk3bDMyLjEsMTYuMXYzMi4yTDY1LjgsMjI5LjJ6IE05Ny45LDI0Ni4ydjMyLjJsLTMyLjEsMTYuMQoJdi0zMi4yTDk3LjksMjQ2LjJ6IE02NS44LDI5NS4zbDMyLjEsMTYuMXYzMi4ybC0zMi4xLTE2LjFWMjk1LjN6IE02Ni4yLDI5NC44bDMyLTE2bDMyLDE2bC0zMiwxNkw2Ni4yLDI5NC44eiBNNjYuMywxOTYuNWwzMi0xNgoJbDMyLDE2bC0zMiwxNkw2Ni4zLDE5Ni41eiBNNjUuOCwxOTYuMlYxNjRsMzIuMS0xNi4xdjMyLjJMNjUuOCwxOTYuMnogTTk3LjksMTQ3LjFMNjUuOCwxMzFWOTguOGwzMi4xLDE2LjFWMTQ3LjF6IE05Ny41LDE0Ny40CglsLTMyLDE2bC0zMi0xNmwzMi0xNkw5Ny41LDE0Ny40eiBNNjUuMiwxMzAuOUwzMy4xLDE0N3YtMzIuMmwzMi4xLTE2LjFWMTMwLjl6IE02NS4yLDE2NHYzMi4ybC0zMi4xLTE2LjF2LTMyLjJMNjUuMiwxNjR6CgkgTTY0LjgsMTk2LjVsLTMyLDE2bC0zMi0xNmwzMi0xNkw2NC44LDE5Ni41eiBNNjQuOCwyOTQuOGwtMzIsMTZsLTMyLTE2bDMyLTE2TDY0LjgsMjk0Ljh6IE02NS4yLDI5NS4zdjMyLjJsLTMyLjEsMTYuMXYtMzIuMgoJTDY1LjIsMjk1LjN6IE02NC44LDM5M2wtMzIsMTZsLTMyLTE2bDMyLTE2TDY0LjgsMzkzeiBNMzMuMSw0MDkuN2wzMi4xLTE2LjF2MzIuMmwtMzIuMSwxNi4xVjQwOS43eiBNMzMuMSwzNzYuNnYtMzIuMmwzMi4xLDE2LjEKCXYzMi4yTDMzLjEsMzc2LjZ6IE0zMy41LDM0My45bDMyLTE2bDMyLDE2bC0zMiwxNkwzMy41LDM0My45eiBNOTcuOSwzNDQuNHYzMi4ybC0zMi4xLDE2LjF2LTMyLjJMOTcuOSwzNDQuNHogTTY1LjgsMzkzLjYKCWwzMi4xLDE2LjF2MzIuMmwtMzIuMS0xNi4xVjM5My42eiBNNjYuMiwzOTNsMzItMTZsMzIsMTZsLTMyLDE2TDY2LjIsMzkzeiBNMTMwLjcsMzYwLjV2MzIuMmwtMzIuMS0xNi4xdi0zMi4yTDEzMC43LDM2MC41egoJIE0xMzAuNywzMjcuNWwtMzIuMSwxNi4xdi0zMi4ybDMyLjEtMTYuMVYzMjcuNXogTTEzMC43LDI2Mi4ydjMyLjJsLTMyLjEtMTYuMXYtMzIuMkwxMzAuNywyNjIuMnogTTEzMC43LDIyOS4ybC0zMi4xLDE2LjF2LTMyLjIKCWwzMi4xLTE2LjFWMjI5LjJ6IE0xMzAuNywxNjR2MzIuMmwtMzIuMS0xNi4xdi0zMi4yTDEzMC43LDE2NHogTTEzMC43LDEzMC45TDk4LjYsMTQ3di0zMi4ybDMyLjEtMTYuMVYxMzAuOXogTTk4LjYsMTYuNmwzMi4xLTE2LjEKCXYzMi4yTDk4LjYsNDguOFYxNi42eiBNOTguNiw0OS43bDMyLjEsMTYuMVY5OEw5OC42LDgxLjhWNDkuN3ogTTEzMC4zLDk4LjNsLTMyLDE2bC0zMi0xNmwzMi0xNkwxMzAuMyw5OC4zeiBNNjUuOCw5Ny45VjY1LjgKCWwzMi4xLTE2LjF2MzIuMkw2NS44LDk3Ljl6IE02NS44LDAuNWwzMi4xLDE2LjF2MzIuMkw2NS44LDMyLjdWMC41eiBNOTcuNSw0OS4xbC0zMiwxNmwtMzItMTZsMzItMTZMOTcuNSw0OS4xeiBNMzMuMSwxNi42CglMNjUuMiwwLjV2MzIuMkwzMy4xLDQ4LjhWMTYuNnogTTMzLjEsNDkuN2wzMi4xLDE2LjFWOThMMzMuMSw4MS44VjQ5Ljd6IE02NC44LDk4LjNsLTMyLDE2bC0zMi0xNmwzMi0xNkw2NC44LDk4LjN6IE0wLjMsMzIuN1YwLjUKCWwzMi4xLDE2LjF2MzIuMkwwLjMsMzIuN3ogTTAuMyw2NS44bDMyLjEtMTYuMXYzMi4ybC0zMi4xLDE2VjY1Ljh6IE0wLjMsMTMwLjlWOTguOGwzMi4xLDE2LjF2MzIuMkwwLjMsMTMwLjl6IE0wLjMsMTY0bDMyLjEtMTYuMQoJdjMyLjJMMC4zLDE5Ni4yVjE2NHogTTAuMywyMjkuMlYxOTdsMzIuMSwxNi4xdjMyLjJMMC4zLDIyOS4yeiBNMC4zLDI2Mi4zbDMyLjEtMTYuMXYzMi4ybC0zMi4xLDE2VjI2Mi4zeiBNMC4zLDMyNy41di0zMi4yCglsMzIuMSwxNi4xdjMyLjJMMC4zLDMyNy41eiBNMC4zLDM2MC41bDMyLjEtMTYuMXYzMi4yTDAuMywzOTIuN1YzNjAuNXogTTAuMyw0MjUuN3YtMzIuMmwzMi4xLDE2LjF2MzIuMkwwLjMsNDI1Ljd6IE0wLjMsNDU4LjgKCWwzMi4xLTE2LjF2MzIuMkwwLjMsNDkxVjQ1OC44eiBNMzIuNCw1NDAuMUwwLjMsNTI0di0zMi4ybDMyLjEsMTYuMVY1NDAuMXogTTAuNyw0OTEuM2wzMi0xNmwzMiwxNmwtMzIsMTZMMC43LDQ5MS4zeiBNNjUuMiw1MjQKCWwtMzIuMSwxNi4xdi0zMi4ybDMyLjEtMTYuMVY1MjR6IE02NS4yLDQ5MWwtMzIuMS0xNi4xdi0zMi4ybDMyLjEsMTYuMVY0OTF6IE0zMy41LDQ0Mi4ybDMyLTE2bDMyLDE2bC0zMiwxNkwzMy41LDQ0Mi4yegoJIE05Ny45LDQ0Mi43djMyLjJMNjUuOCw0OTF2LTMyLjJMOTcuOSw0NDIuN3ogTTk3LjksNTQwLjFMNjUuOCw1MjR2LTMyLjJsMzIuMSwxNi4xVjU0MC4xeiBNNjYuMiw0OTEuM2wzMi0xNmwzMiwxNmwtMzIsMTYKCUw2Ni4yLDQ5MS4zeiBNMTMwLjcsNTI0bC0zMi4xLDE2LjF2LTMyLjJsMzIuMS0xNi4xVjUyNHogTTEzMC43LDQ5MWwtMzIuMS0xNi4xdi0zMi4ybDMyLjEsMTYuMVY0OTF6Ii8+Cjwvc3ZnPgo=");
    ;
    background-size: 131.34px 540.3;
    background-repeat: repeat;
}

@media(max-width: 768px) {
    .logo {
        padding: 40px 32px;
    }

    .brand-bg {
        display: none;
    }

    .container {
        background-color: #fff;
        height: 100%;
        display: flex;
        flex-direction: column;
		margin: 15px;
    }

    .brand-content {
        width: 100%;
        height: auto;
        margin-left: 0px;
        margin-bottom: 0px;
    }

    .form-content {
        width: 100%;
        height: 70vh;

    }
	.notice-container {
    padding: 15px;
    background-color: rgba(9, 52, 79, 0.85);
    width: 100%;
  }
}