/*------------------------------------*\
  #Root
\*------------------------------------*/
:root{
  --Primary-color:  #111148;
  --Secondary-color:  #0082BE;
  --Button-color:  #0082BE;
  --Button-hover-color: #111148;
  --Text-color: #666666;
  
  /* Neutral Colors */
  --White-color: #fff;
  --Black-color: #000;

  --Danger-color: #cf4646;
  --Danger-hover-color: #cc3c3c;
}

/*------------------------------------*\
  #BASE COMPONENTS
\*------------------------------------*/
/* Base */

/* Buttons Styling - Start */
/* Buttons */ 
/* Adds Transitions to clickable buttons and links */
.catfish-button,
.button,
a{
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

/* Adds Primary color to buttons and Button hover*/
html:not(.page-dynamicproduct-editor) .catfish-button:not(.is-danger, .is-outlined, #deleteall, #continueshoppingDummy, .changepasswordbutton),
a.button.is-primary{
  background-color: var(--Button-color) !important;

  &:hover,
  &:focus,
  &:active{
      background-color: var(--Button-hover-color)  !important;
      box-shadow: unset !important;
  }
}

/* Add Danger color to Clear Cart button */
#deleteall{
  background-color: var(--Danger-color);

  &:hover{
      background-color: var(--Danger-hover-color);
  }
}

/* Add Primary color to Continue Shopping button */
#continueshoppingDummy, .is-outlined{
  border-color: var(--Button-color);
  color: var(--Button-color);
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;

  &:hover{
      border: 2px solid var(--Button-hover-color);
      background-color: var(--Button-hover-color) !important;
      color: #fff;
  }
}
/* Buttons Styling - End */

/* Typography */
/* Title Styling - Start */
/* Change Title color to Primary and font weight */
.title,
.one-page-checkout .step-title h2,
.block-account-navigation .title{
  color: var(--Primary-color);
  font-weight: 400;
}

/* Title Styling - End */

/* Paragraph */
/* Paragraph Styling - Start */
/* Add Underline to Paragraph links */
p:not(.back-link) > a{
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: .3s;
  text-underline-offset: 0.25rem;

  &:hover{
      color: var(--Button-color);
      text-decoration: underline !important;
  }
}
/* Paragraph Styling - End */


/*------------------------------------*\
  #LAYOUTS
\*------------------------------------*/
/* Header */
/* Header Styling - Start */
.ict-navbar{
  /* Change navbar-item and navbar-link color to Primary Color, text-transform to uppercase and added hover color*/
  & a.navbar-item, a.navbar-link{
    color: var(--Primary-color);
    text-transform: uppercase;

    &:hover{
      color: var(--Button-color);
    }
  }

  & .navbar-end{
    /* Change header buttons styling to be more consistent, this styling will need to be applied when changing the Basket button to Icon */
    & .button.is-small, 
    & .button.is-white{
      background: var(--Button-color);
      color: var(--White-color);
      padding-left: 1rem;
      padding-right: 1rem;
      transition: .3s;
      -webkit-transition: .3s;
      -moz-transition: .3s;
      -ms-transition: .3s;
      -o-transition: .3s;

      & i{
          font-size: 1.1rem;
          font-weight: 400;
      }

      &:hover,
      &:active,
      &:focus{
        background-color: var(--Button-hover-color);

        & i{
            color: var(--Button-hover-color);
            color: var(--White-color);
        }
      }

      &:focus{
        box-shadow: none;
      }
    }

    & .button.is-white{
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
  }
}
/* Header Styling - End */

/* Footer */
/* Footer Styling - Start */
.ict-dedicated-footer{
  /* Add margin to footer links underneath the logo for spacing */
  & .ict-dedicated-footer-column-1 .is-flex > a{
    margin-bottom: 1rem;
  }

  /* Add Underline to Footer links on hover */
  & a{
      text-decoration: underline;
      text-decoration-color: transparent;
      transition: .3s;
      text-underline-offset: 0.25rem;

    &:hover{
      color: var(--Button-color);
      text-decoration: underline !important;
    }
  }
  /* Made footer link smaller */
  & .footer-copyright{

    & h4{
      font-size: 80%;
    }
  }
}
/* Footer Styling - End */

/* Admin Pages - Change Password */
/* Change Password */
html.page-customer-changepassword .customer-pass-recovery{

  & .button{

    &:hover{
      background-color: var(--Button-hover-color);
    }

    & input.catfish-button.changepasswordbutton {
      background-color: transparent !important;

      &:hover{
        background-color: transparent !important;
      }
    }
  }
}

.layout--accountPage .block-account-navigation {
    padding-top: 2rem;
}

.cerm-container {
  .level.box {
    padding: 1rem!important;
  }
  .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis, .account-page--myorders .orders_v2 .order_page_select_container .order_page_state {
      font-size: .75em!important;
  }
  input[type="search"], input[type="number"]  {
    height: 2.7em!important;
  }
  .field.has-addons .control .button {
    height: 100%!important;
  }
  .description-container {
    word-break: break-word;
  }
  .order-quantity {
        span.product-min-info {
        width: 100%;
        display: block;
        padding-left: 4px;
        padding-bottom: 5px;
    }
  }
}

.estimates-delete.is-info.is-left.is-medium.cf-tooltip {
    display: none;
}