@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;700;900&display=swap');
@import url(base.css);
@import url(colors.css);
@import url(grid.css);
@import url(forms.css);
@import url(buttons.css);
@import url(margin.css);
@import url(padding.css);

:focus{outline: none;}

/* overright */
a {color: #0050FF; text-decoration: none;}
.jds-btn.btn-primary { background: #0050FF; border-color: #0030FF;}
.jds-tabs { margin-bottom: 0px;}

/* custom style */
.font-width300 {font-weight: 300;}
.font-width500 {font-weight: 400;}
.font-width500 {font-weight: 500;}
.font-width600 {font-weight: 600;}
.font-width800 {font-weight: 800;}
.font-size12 {font-size: 12px;}
.font-size14 {font-size: 14px;}
.font-size16 {font-size: 16px;}
.font-size18 {font-size: 18px;}
.text-center {text-align: center;}
.custom-login-bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../img/login-bg.jpg);
    background-color: #0000FF;
    box-sizing: border-box;
}

.login-box .form-eliment#login-username, .login-box .form-eliment#login-password, .login-box .form-eliment#cp-login-password  {
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    padding-top: 26px !important;
    padding-bottom: 26px !important;

    background: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
    box-shadow: inset 0px 4px 6px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.login-box .form-eliment:focus {
    outline: none;
    outline-color: #15D5FF;
    border-color: #0050FF;
    text-shadow: 0 0 0 #00305e;
}
.login-box .massage {
    border-radius: 4px;
    padding: 10px 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2),  0 -1px 2px rgba(0,0,0,0.1);
}
.jds-btn.btn-block, button.jds-btn.btn-block {
    display: block;
    width: 100%;
}

/* Tab */
.tabs-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tabs-nav li {
    float: left;
    width: 50%;
    box-sizing: border-box;    
    color: #ffffff;
    text-align: center;
    background-color: rgba(0, 80, 255, 0.4);
    backdrop-filter: blur(4px);
}

.tabs-nav li h5 {
    margin: 0;
    font-size: 24px;
    clear: both;
    display: block;
    font-weight: 300;
}
.tabs-nav li small {
    font-size: 14px;
    line-height: 16px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media only screen and (max-width: 600px) {
    .tabs-nav li small { display: none;}
}
@media only screen and (max-width: 500px) {
    .tabs-nav li h5 { font-size: 1rem;}
    .tabs-nav li a {padding: 20px 10px;}
}

.tabs-nav li a {
    display: block;
    padding: 30px 20px;
    color: #ffffff;
    text-decoration: none;
	cursor: pointer;
}
.tabs-nav li.tab-active, .tabs-nav li:hover {
    background: #0050FF;
    transition: background-color 0.25s ease;
}
.tabs-nav li:first-child a {
  border-right: 0;
  border-top-left-radius: 6px;
}
.tabs-nav li:last-child a {
  border-top-right-radius: 6px;
}
.tabs-stage {
  border-top: 0;
  clear: both;
  position: relative;
  top: -1px;
}

.alert-error {
    color: #9A3B26 !important;
    background-color: rgba(253, 90, 54, 0.1) !important;
    border-color: #F58383 !important;
}
.alert-warning {
    color: #745A19 !important;
    background-color: rgba(240, 145, 25, 0.1) !important;
    border-color: #EC9D41 !important;
}
.jds-alert {
    position: relative;
    padding: 16px 16px;
    margin-bottom: 16px;
    border-width: 1px;
    border-color: rgba(104, 104, 104, 0.1);
    border-style: solid;
    background-color: rgba(104, 104, 104, 0.3);
}
.positionRelative{
    position: relative;
}


@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.icon-spiner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spinner .6s linear infinite;
}

.password-icon{position: relative;}
.password-icon #eyeIcon, .password-icon #cpEyeIcon{
cursor: pointer;
position: absolute;
top: 18px;
right: 12px;
}