//variables
@primaryColor: #578DC9;
@greyColor: #a8b3c5;
@yellowColor: #ffc20e;
@blueGreyColor: #4d5466;
@blackColor: black;
@greyWhiteColor: #a8b3c521;
@leftNavigationHoverBG: #476a9c;
@greyBackground: #e1e8ee;
@lightBlueBackground: #f0f7fd;
@lightBlueHover: #e3eef7;
@borderColor: #0000001f;
@notificationIconColor: #abc8e6;
@white: #ffffff;

#appId {
  .v-overlay {
    z-index: 1055!important;
  }

  #GroupBindingDrawer {
    z-index: 1055!important;

    .title {
      border-bottom: 1px solid rgba(13,13,13,0.05);
      box-sizing: border-box;
      padding: 0px!important;

      span {
        color: @blueGreyColor;
        font-size: 18px;
        font-weight: bold;
        line-height: 20px;
        padding-left: 4%;
      }
    }

    .content {
      overflow-y: auto;
      overflow-x: hidden;
      max-height: 80.5vh;

      span {
        color: @blueGreyColor;
        font-size: 18px;
        font-weight: bold;
        line-height: 20px;
        padding-left: 4%;
      }

      .selectize-input {
        max-height: inherit;
        min-height: 80px;
        height: max-content;
        padding: 8px;

        .item {
          padding-right: 35px !important;
          background: #ccddef;
          color: #568dc9;
          border: 1px solid #568dc9;
          border-radius: 15px;
          margin: 4px 10px 4px 4px;
          font-size: 13px;

          a {
            color: #ccddef;
            background-color: #568dc9;
            border-radius: 50%;
            font-size: 12px;
            width: 16px;
            height: 17px;
            top: 3px;
            right: 10px;
          }
        }
      }
    }

    .boundGroups {
      padding-left: 1%;
      max-height: 100%!important;
    }
    .delete {
      margin-right: 7%;

      .uiIconLightGray {
        color: @greyColor;
        font-size: 12px;
      }
    }
    
    .closeIcon {
      color: @greyBackground!important;
    }
    
    .close {
      margin-right: 2%;
    }
    .uiIconEcmsGoBack {
      color: @blueGreyColor;
    }
    .leftIcon {
      margin-left: 18% !important;
    }
    .drawerActions {
      overflow-y: auto;
      overflow-x: hidden;
      width: 100%;
      height: 60px;
      position: absolute;
      bottom: 0;
      border-top: 1px solid rgba(13,13,13,0.05);
      padding-top: 4px!important;
      padding-bottom: 12px!important;

      .btn-primary {
        color: @white!important;
      }
      .btn-primary:hover {
        background-color: #578DC9;
      }
    }
  }
  
  .bindingModal {
    z-index: 1055!important;
    
    .modal-content {
      right: 9%;
      bottom: 9% !important;
      width: auto!important;

      .popupHeader {
        margin-bottom: auto;
        background-color: white;
        display: inline-flex;
        
        .closeBindingModal {
          left: 84%;
        }
      }
      
      .popupContent {
        p {
          margin-bottom: 60px;
        }

        .uiAction.uiActionBorder {
          padding-bottom: 8px!important;
          .btn.btn-primary, .btn {
            position: relative;
            left: 27%;
            font-weight: normal!important;
          }
          .btn {
            min-width: 13%;
          }
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .bindingModal {
    .modal-content {
      right: 0%!important;
    }
  }
}

@media (max-width: 767px) {
  .bindingModal {
    .modal-content {
      .popupHeader {
        .closeBindingModal {
          left: 38% !important;
        }
      }
      
      .popupContent {
        .btn.btn-primary, .btn {
          left: 22%!important;
        }
        .btn {
          min-width: 16% !important;
        }
      }
    }
  }  
}
