@import url("/fonts/css2.css?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
:root {
  --body-color: #203650;
  --nav-dark-blue: #123862;
  --metal-bluish-grey: #344054;
  --tertiary-grey: #ebecf1;
  --glass-bluish-grey: #f5f6fa;
  --bluish-gray: #667085;
  --tertiary-white: #fff;
  --water-blue: #0b6fd0;
  --ice-blue: #f7fafd;
  --heavy: 700;
  --regular: 400;
  --bold: 900;
  --backdrop-color: #ced2d7;
}
button {
  cursor: pointer;
}
body {
  margin: 0;
  padding: 0;
  background-color: var(--body-color);
  display: flex;
  flex-direction: column;
  font-size: 1.6rem;
}
html {
  font-size: 62.5%;
}
* {
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
  margin: 0;
}
img {
  max-width: 100%;
}
.logo {
  position: absolute;
  top: 40px;
}
.container {
  max-width: 178rem;
  margin: 0 auto;
  width: 100%;
  padding: 0 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.login-box {
  max-height: 80vh;
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.login-box .login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 72rem;
  left: 2.8rem;
  background-color: var(--tertiary-white);
  border-radius: 0.8rem;
  box-shadow: 0px 8px 20px #1018281f;
  padding: 9.4rem 7.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 91.5rem;
}
.login-box .login-container .form-box {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.login-box .image-box {
  background: rgb(209, 211, 212);
  background: linear-gradient(
    30deg,
    rgba(209, 211, 212, 1) 0%,
    rgba(242, 243, 243, 1) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  border-radius: 0.8rem;
  height: 86%;
  max-height: 69.4rem;
  width: 100%;
  padding: 5.3rem 10%;
  overflow: hidden;
  justify-content: flex-end;
  display: flex;
  align-items: center;
}
.login-box .image-box .image-holder {
  max-height: 58.3rem;
  max-width: 61.5rem;
  width: 40%;
  height: 100%;
}
.image-box .image-holder .image {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}
.welcome-heading {
  font-weight: var(--heavy);
  font-size: 4.4rem;
  color: var(--nav-dark-blue);
}
.heading-box {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.heading-box .description {
  font-weight: var(--regular);
  color: var(--metal-bluish-grey);
}
.welcome-heading .gradient-text {
  background: #7ca4d6;
  background: linear-gradient(90deg, #7ca4d6 0%, #b93b96 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.login-form .input-element {
  display: flex;
  flex-direction: column;
  max-width: 38.4rem;
  width: 100%;
  gap: 1rem;
}
.login-form .input-element label {
  color: var(--metal-bluish-grey);
  align-self: flex-start;
  font-weight: var(--heavy);
}
.input-element label sup {
  color: rgb(208, 57, 11);
  font-size: inherit;
  font-family: inherit;
  top: 0px;
  position: relative;
  line-height: 0;
  vertical-align: initial;
}
.login-form input {
  border: 1px solid #d0d5dd;
  border-radius: 0.5rem;
  flex: 1 1 0%;
  padding: 1.15rem 1.4rem;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px;
  font-family: Lato-Medium, sans-serif;
  color: rgb(18, 56, 98);
  transition: all 0.3s ease-in-out 0s;
  outline: 0;
  font-weight: var(--regular);
  font-size: 1.4rem;
}
.select-2-selection-custom {
  border: 1px solid #6294e4 !important;
  border-radius: 0.5rem !important;
  height: 4rem;
  background-color: transparent !important;
  flex: 1 1 0%;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px;
  font-family: Lato-Medium, sans-serif;
  color: rgb(18, 56, 98);
  transition: all 0.3s ease-in-out 0s;
  outline: 0;
  font-weight: var(--regular);
}
.select-2-selection-custom .select2-selection__rendered {
  padding: 1rem 2rem 1.3rem 1.4rem !important;
  line-height: 17px !important;
  color: var(--body-color) !important;
  font-size: 1.4rem;
}
.select-2-selection-custom .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%);
}
.select-2-custom-dropdown {
  transform: translateY(0.6rem);
  box-shadow: 0px 5px 20px #10182833;
  border-radius: 0.8rem !important;
  overflow: hidden;
  border: 1px solid var(--tertiary-grey) !important;
}
.select-2-custom-dropdown
  .select2-results
  .select2-results__option--selectable {
  padding: 1.2rem 1.4rem !important;
  color: var(--body-color);
}
.select-2-custom-dropdown
  .select2-results__option--highlighted.select2-results__option--selectable,
.select-2-custom-dropdown .select2-results__option--selected {
  background-color: var(--glass-bluish-grey) !important;
  color: var(--body-color);
}
.login-form input.error,
.select-2-selection-custom.error {
  border-color: rgb(208, 57, 11) !important;
}
.login-form input:hover:not(:disabled, .error),
.login-form input:focus:not(:disabled, .error) {
  border-color: rgb(124, 164, 214);
}
.login-form input:not(:placeholder-shown, :disabled) {
  border-color: rgb(124, 164, 214);
}
.login-form input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #7d7d7d;
  font-weight: var(--regular);
}

.login-form input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #7d7d7d;
  font-weight: var(--regular);
}

.login-form input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #7d7d7d;
  font-weight: var(--regular);
}

.add-tag-modal .modal-body.show,
.add-tag-modal .modal-backdrop.show {
  display: flex;
}

.add-tag-modal .modal-body {
  position: fixed;
  flex-direction: column;
  top: 50%;
  left: 50%;
  max-height: 80vh;
  overflow: hidden;
  transform: translate(-50%, -50%);
  padding: 3rem;
  background-color: var(--tertiary-white);
  border-radius: 1rem;
  box-shadow: 0px 5px 20px #1018281c;
  width: 100%;
  max-width: 57rem;
  z-index: 1057;
  display: none;
}
.add-tag-modal .modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--backdrop-color);
  opacity: 0.5;
  width: 100%;
  z-index: 1056;
  height: 100%;
  display: none;
}
.add-tag-modal .modal-body .close-btn {
  padding: 0;
  outline: 0;
  border: 0;
  background-color: transparent;
  height: 3.6rem;
  position: absolute;
  right: 2rem;
  top: 2rem;
  z-index: 1;
}
.inner-modal-content {
  position: relative;
  max-height: 60rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.modal-body .close-btn .close-icon {
  pointer-events: none;
}
.modal-body .close-btn .close-icon .cross-bg {
  fill: var(--tertiary-white);
  transition: all 0.3s ease-in-out;
}
.modal-body .close-btn .close-icon .cross {
  fill: var(--body-color);
  transition: all 0.3s ease-in-out;
}
.modal-body .close-btn:hover .close-icon .cross {
  fill: var(--water-blue);
}
.modal-body .close-btn:hover .close-icon .cross-bg {
  fill: var(--ice-blue);
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-right: 3rem;
}
.modal-body .login-form .input-element {
  max-width: 100%;
}
.modal-header .icon {
  height: 5.6rem;
  width: 5.6rem;
}
.modal-header .modal-title {
  font-size: 2.4rem;
  font-weight: var(--heavy);
}
.primary-btn {
  width: auto;
  background-color: var(--water-blue);
  border: 1px solid var(--water-blue);
  border-radius: 0.8rem;
  color: var(--tertiary-white);
  transition: all 0.3s ease-in-out;
  padding: 1.1rem 1.6rem;
}
.primary-btn:hover {
  background-color: transparent;
  color: var(--water-blue);
}
.cancel-btn {
  width: auto;
  background-color: transparent;
  border: 1px solid var(--bluish-gray);
  border-radius: 0.8rem;
  color: var(--bluish-gray);
  transition: all 0.3s ease-in-out;
  padding: 1.1rem 1.6rem;
}
.cancel-btn:hover {
  color: var(--water-blue);
  border-color: var(--water-blue);
}
.footer-action-box {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.footer-action-box button {
  flex: 1;
}
span.error {
  color: rgb(208, 57, 11);
  font-size: 1rem;
}
span.error:empty {
  display: none;
}

@media only screen and (max-width: 1599px) {
  .login-box .image-box {
    padding: 5.3rem 5%;
  }
  .container {
    max-width: 90%;
  }
  .login-box .login-container {
    max-width: 50%;
  }
  .welcome-heading {
    font-size: 3.7rem;
  }
}
@media only screen and (max-width: 1439px) {
  .login-box .image-box .image-holder {
    max-width: 30%;
  }
}
@media only screen and (max-width: 1365px) {
  .welcome-heading {
    font-size: 3rem;
  }
  .heading-box .description,
  .login-form .input-element label {
    font-size: 1.4rem;
  }
  .login-box .login-container {
    max-width: 46.3%;
    padding: 8rem 6.8rem;
  }
  .login-box .image-box .image-holder {
    max-width: 40%;
  }
}
@media only screen and (max-width: 1279px) {
  .welcome-heading {
    font-size: 2rem;
  }
  .heading-box .description,
  .login-form .input-element label,
  .login-form input,
  .select-2-selection-custom .select2-selection__rendered,
  .select-2-custom-dropdown
    .select2-results
    .select2-results__option--selectable {
    font-size: 1.2rem;
  }
  .login-box .login-container {
    padding: 6rem 4.8rem;
  }
}
@media only screen and (max-width: 992px) {
  .login-box {
    max-width: 60rem;
  }
  .login-box .login-container {
    max-width: 100%;
    left: 0;
  }
  .login-box .image-box {
    display: none;
  }
}

.select2-container--default .select2-selection--multiple {
  border-radius: 0.25rem;
  min-height: calc(1.5em + 0.75rem + 2px);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: 1.50rem;
  color: white;
  background-color:var( --water-blue);
  width: 10rem;
  height: 2rem;
  
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-weight: bold;
  margin-right: 2px;
}
.select2-selection__placeholder {
  font-size: 14px;
  color: #999;
}