//   toast design start here------------

.toast-wrap {
  padding: 1.6rem;
  border-radius: 0.8rem;
  display: grid;
  align-items: flex-start;
  grid-template-columns: min-content 1fr min-content;
  grid-gap: 1rem;
  width: 50rem;

  .img-box {
    width: 2.5rem;
    height: 2.5rem;
    transform: translateY(.2rem);
    .img {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }

  .text {
    font-size: 1.3rem;
    color: #020202;
  }

  .cancel {
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;

    svg{
        width: 1rem;
        height: 1rem;
    }
  }
}

.toast-wrap__error {
  background-color: #fff5f5;
  border: 0.15rem solid #ffdfdd;

  .cancel {
    background-color: #ffdfdd;
    svg {
      fill: #ff0f00;
    }
  }
}

.toast-wrap__success {
    background: #D1F5D7 !important;
  border: .15rem solid #B3EFBC !important;

  .cancel {
    background-color: #B3EFBC;
    svg {
      fill: #1ACE37;
    }
  }
}

.toast-wrap__info {
    background: #E9F5FF !important;
  border: .15rem solid #B9DEFE !important;

  .cancel {
    background-color: #B9DEFE;
    svg {
      fill: #476885;
    }
  }
}

.toast-wrap__warning {
    background: #FFF6ED !important;
  border: .15rem solid #FFE6CD !important;

  .cancel {
    background-color: #FFE6CD;
    svg {
      fill: #EA872D;
    }
  }
}

// toastify styles-------------
.Toastify__toast {
  padding: 1.6rem !important;
  border-radius: 0.8rem !important;
  display: grid !important;
  align-items: flex-start !important;
  grid-template-columns: min-content 1fr min-content !important;
  grid-gap: 1rem !important;
  width: 50rem !important;

  @media only screen and (max-width: 42em) {
    font-size: 1.5rem !important;
  }

  img {
    margin-right: 1rem !important;
    width: 2rem !important;
    height: 2rem !important;
  }

  @media only screen and (max-width: 42em) {
    border-radius: unset !important;
  }
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  background: #D1F5D7 !important;
  border: .15rem solid #B3EFBC !important;
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
    background: #FFF6ED !important;
    border: .15rem solid #FFE6CD !important;
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  background-color: #fff5f5 !important;
  border: 0.15rem solid #ffdfdd !important;
}
.Toastify__toast-theme--colored.Toastify__toast--info {
    background: #E9F5FF !important;
    border: .15rem solid #B9DEFE !important;
}

.Toastify__progress-bar {
  // display: none !important;
}

.Toastify__close-button {
  // border: 0.2rem solid #ffffff !important;
  align-self: center !important;
  border-radius: 50%;
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  padding: 0.6rem !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  position: relative !important;

  & > * {
    transform: translateY(-0.15rem);
  }
}
.Toastify__close-button--default {
}
.Toastify__close-button > svg {
}
.Toastify__close-button:hover,
.Toastify__close-button:focus {
}

//   toast design ends here------------

// global input style start here -------------
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: 0 0 0 30px #f7f8f7 inset !important;
  -webkit-box-shadow: 0 0 0 30px #f7f8f7 inset !important;
}
@media only screen and (max-width: 42em) {
  input:focus,
  input[type="text"]:focus,
  input[type="email"]:focus,
  .select-react:focus,
  .select-react input:focus,
  .bank_select:focus,
  .bank_select input:focus,
  input[type="password"]:focus,
  textarea:focus,
  select:focus {
    font-size: 16px;
  }

  .react-select-class {
    & > *:nth-child(3) {
      & > *:first-child {
        & > *:nth-child(2) {
          input:focus {
            font-size: 16px !important;
          }
        }
      }
    }
  }
}


// global input style end here --------------

// variables & functions
@import "functions";
@import "variables";

// base & layout
@import "./base";
@import "breakpoints";
@import "grid";

// colors
@import "colors";

// components (buttons, card, navbar)
@import "./components/cards/card";
@import "./components/buttons/button";
@import "./components/navbar";     
@import "./components/tablinks/tab_and_tabLinks";  
@import "./components/actionBars/action_bar";  
@import "./components/breadCrumbs/bread_crumbs";
@import "./components/Input-folder/check_box";   
@import "./components/Input-folder/toggle_box";
@import "./components/toolTip/toolTip";
@import "./components/Dropdowns/dropDowns";
@import "./components/Input-folder/input_styles";
@import "./components/Input-folder/radio_check";
@import "./components/tables/tables";
@import "./components/tables/pagination";
@import "./components/modal/modal";
@import "./components/Input-folder";
@import "./components/toast";