@import "./quill.scss";
@import "fonts";

.material-btn {
  border: none;
  font-family: $font-pt;
  font-weight: bold;
  font-size: 16px;
  color: #5D49F2;
  line-height: 18px;
  background: #fff;
  cursor: pointer;
  padding: 9px 20px;
  text-transform: uppercase;
}

.material-btn__action {
  min-width: 140px;
  height: 70px;
  background: #EEEDF5;
  border-radius: 4px !important;
}

.edit-icon, .play-icon, .delete-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  position: relative;
  top: 5px;
  background-color: #E0E0E0;
  background-image: url(/assets/img/controls/pencil.svg);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
}

.freeze-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: none;
  background-color: #FFFFFF;
  background-image: url(/assets/img/controls/freeze.svg);
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.return-address-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: none;
  background-color: #FFFFFF;
  background-image: url(/assets/img/controls/return-address.svg);
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.play-icon {
  background-image: url(/assets/img/controls/play.svg);
}

.delete-icon {
  background-image: url(/assets/img/controls/delete.svg);
  background-size: 36px;
}

.main-btn {
  height: 36px;
  border-radius: 18px !important;
  background-color: #5d49f2;
  border: solid 1px #5d49f2;
  font-size: 14px;
  font-family: Roboto-Regular;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  color: #ffffff !important;
  cursor: pointer;
  outline: none !important;
  @media screen and (min-width: 320px) and (max-width: 768px) {
    height: 40px;
  }
}

a.main-btn {
  padding: 6px 20px;
}

.ghost-btn {
  font-family: "Roboto-Regular";
  font-size: 14px;
  padding: 6px 20px;
  height: 36px;
  background-color: transparent;
  border: solid 1px #5d49f2;
  border-radius: 18px !important;
  cursor: pointer;
  outline: none;
}

ghost-btn[disabled] {
  border: solid 1px #969696;
  color: #969696;
}

.ghost-btn.small {
  padding: 2px 20px !important;
}

.main-btn[disabled] {
  background-color: #a4a2b0;
  border-color: #969696;
}

.input {
  height: 36px;
  color: #000;
  padding: 0 16px;
  border-radius: 18px;
  background-color: #ffffff;
  border: solid 1px #a4a2b0;
  outline: none;
}

textarea.input {
  padding: 10px;
  min-height: 132px;
  width: 640px;
}

.sortable {
  cursor: pointer;
  position: relative;
}

.sortable:after,
.sortable:before {
  content: '';
  display: block;
  position: absolute;
  width: 15px;
  height: 15px;
  right: -17px;
}

.sortable:after {
  background-image: url(/assets/img/table-controls/arrow-down-gray.svg);
  top: 8px;
}

.sortable:before {
  top: -9px;
  background-image: url(/assets/img/table-controls/arrow-up-gray.svg);
}

.sortable__active.sortable__active_asc.sortable:before {
  background-image: url(/assets/img/table-controls/arrow-up-white.svg);
}

.sortable__active.sortable__active_desc.sortable:after {
  background-image: url(/assets/img/table-controls/arrow-down-white.svg);
}

/* switch control*/

.input-switch__on,
.input-switch__off {
  text-align: center;
  padding: 5px 15px;
  background: transparent;
  border: 1px solid #a4a2b0;
  height: 36px;
}

.input-switch__on {
  border-radius: 18px 0 0 18px;
  border-right: none;
}

.input-switch__off {
  border-radius: 0 18px 18px 0;
}

.selected {
  background: #231a5d;
  color: #fff;
}

.sex-switch .input-switch__off,
.sex-switch .input-switch__on {
  width: 90px;
}

/* ng prime paginator restyle */

body .ui-paginator {
  margin: 0 auto;
  margin-bottom: 100px !important;
  background-color: transparent !important;
}

body .admin-table .ui-paginator {
  margin-bottom: -5px !important;
}

body .ui-widget-header {
  background-color: transparent !important;
  border: none !important;
}

body .ui-paginator .ui-paginator-first,
body .ui-paginator .ui-paginator-prev,
body .ui-paginator .ui-paginator-next,
body .ui-paginator .ui-paginator-last {
  color: #5d49f2 !important;
}

body .ui-paginator .ui-paginator-pages .ui-paginator-page {
  text-align: center !important;
  font-size: 18px !important;
  font-family: Roboto-Bold !important;
  color: #5d49f2 !important;
  width: 30px !important;
  height: 30px !important;
}

body .ui-state-active, body .ui-state-highlight {
  color: #000 !important;
  background-color: #ffd038 !important;
}

body .ui-paginator .ui-paginator-pages .ui-paginator-page {
  padding: 2px 0 0 !important;
}

/* ng prime calendar style */

.ui-inputtext.input-date {
  height: 36px;
  color: #000;
  width: 230px;
  padding: 0 16px;
  border-radius: 18px;
  background-color: #ffffff;
  border: solid 1px #a4a2b0 !important;
  background-image: url(/assets/img/controls/calendar.svg);
  background-repeat: no-repeat;
  background-position: 200px center;
  outline: none;
}

.dialog .ui-datepicker {
  top: -246px !important;
}

/* validation input style */

input.ng-dirty.ng-invalid,
.input-component.ng-invalid.ng-dirty .input,
textarea.ng-dirty.ng-invalid,
p-calendar.ng-dirty.ng-invalid .ui-inputtext {
  border-color: red !important;
}

input.ng-valid {
  border-color: #a4a2b0 !important;
}

.input-component.ng-dirty.ng-invalid .ui-inputtext.input-date,
.input-component.ng-dirty.ng-invalid .input,
quill-editor.ng-dirty.ng-invalid .ql-container {
  border-color: red !important;
}

.new-allotment-event .submitted .input-component.ng-invalid input.input {
  border-color: red !important;
}

.input-component.ng-pristine.ng-invalid.ng-untouched.ng-dirty .input-switch__on,
.input-component.ng-pristine.ng-invalid.ng-untouched.ng-dirty .input-switch__off {
  border-color: red !important;
}

.input-component.ng-pristine.ng-invalid.ng-untouched .input-switch__on,
.input-component.ng-pristine.ng-invalid.ng-untouched .input-switch__off,
.ng-dirty .ng-valid .input-switch .input-switch__on,
.ng-dirty .ng-valid .input-switch .input-switch__off {
  border-color: #a4a2b0 !important;
}

textarea.ng-pristine.ng-invalid.ng-untouched.ng-dirty,
p-radiobutton.ng-dirty.ng-invalid .ui-radiobutton-box.ui-widget {
  border: 1px solid red !important;
}

/* angular-material tabs */

.mat-tab-label-content {
  font-family: $font-pt;
  font-weight: bold;
  font-size: 24px;
  color: #5d49f2;
}

.mat-tab-label-active .mat-tab-label-content {
  color: #000;
}

.mat-ink-bar {
  display: none;
}

.mat-tab-labels {
  border-bottom: none !important;
}

.mat-tab-body-wrapper {
  margin-top: 24px !important;
}

.mat-tab-label {
  @media screen and (min-width: 320px) and (max-width: 768px) {
    display: block !important;
    text-align: left !important;
  }
  padding-left: 0 !important;
}

.report-tab .mat-tab-label {
  margin: 0 1px 0;
}

.report-tab .mat-tab-label {
  height: auto;
  &:hover {
    box-shadow: 0 2px 10px 0 rgba(137, 137, 137, 0.5);
  }
  @media screen and (min-width: 320px) and (max-width: 768px) {
    width: 20%;
  }
}

.report-tab .mat-tab-label-content {
  width: 234px;
  height: 155px;
  background: #fff;
  color: #5d49f2;
  &:hover {
    box-shadow: 0 2px 10px 0 rgba(137, 137, 137, 0.5);
  }
  @media screen and (min-width: 320px) and (max-width: 768px) {
    width: 100%;
    height: 50px;
  }
}

.report-tab .mat-tab-list {
  padding: 4px 0;
}

.report-tab .mat-tab-label-active .mat-tab-label-content {
  background: #231a5d;
  color: #fff;
}

.report-tab .mat-tab-labels {
  @media screen and (min-width: 320px) and (max-width: 768px) {
    display: flex !important;
    padding: 0;
  }
}

/* ng-prime tabs */

body .ui-tabview.ui-widget-content {
  background-color: transparent !important;
}

body .ui-tabview-panels .ui-widget-content {
  background-color: transparent !important;
}

body .ui-tabview .ui-tabview-panel {
  padding: 10px 0 !important;
}

body .ui-tabview.ui-tabview-top .ui-tabview-nav li {
  background-color: transparent !important;
  border: none !important;
  &:hover {
    border: none !important;
  }
  a {
    .ui-tabview-title {
      font-family: $font-pt;
      font-weight: bold;
      font-size: 24px;
      color: #5d49f2;
    }
  }
}

body .admin-tabs {
  .ui-tabview.ui-tabview-top .ui-tabview-nav li {
    a .ui-tabview-title {
      color: #828282;
    }
  }
}

body .sub-tabs .ui-tabview.ui-tabview-top {
  a {
    .ui-tabview-title {
      font-size: 16px !important;
    }
  }
}

body .ui-tabview.ui-tabview-top .ui-tabview-nav li.ui-state-active {
  a {
    .ui-tabview-title {
      color: #000;
    }
  }
}

body .ui-tabview.ui-tabview-top .ui-tabview-nav li.ui-state-default:first-child a {
  padding-left: 0 !important;
}

/* ng-prime upload */

.ui-fileupload-choose.ui-button {
  font-family: "Roboto-Regular";
  height: 36px;
  background-color: transparent;
  border: solid 1px #5d49f2;
  border-radius: 18px !important;
  cursor: pointer;
  outline: none;
  padding-top: 5px;
  color: #000;
}

.ui-fileupload .ui-fileupload-buttonbar {
  padding: 0 !important;
}

p-fileUpload.ng-dirty.ng-invalid .ui-fileupload-choose.ui-button {
  border: solid 1px red !important;
}

.ui-fileupload-content.ui-widget-content.ui-corner-bottom {
  border: none;
}

body .ui-widget-content {
  background-color: #fff !important;
}

body .ui-button {
  background-color: transparent !important;
}

body .ui-button .fa-close:before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(/assets/img/controls/cross.svg);
  background-size: cover;
}

/* ng-prime checkbox */

body .ui-chkbox .ui-chkbox-box {
  border-radius: 100px;
  width: 24px;
  height: 24px;
}

body .ui-chkbox .ui-chkbox-box.ui-state-active {
  background-color: #fff !important;
  padding-top: 2px;
  color: #5d49f2;
}

.ui-chkbox-box .fa-check:before {
  color: #5d49f2;
}

/* ng-prime radio */

body .ui-radiobutton-box {
  width: 20px;
  height: 20px;
}

body .ui-radiobutton-label {
  display: initial;
  cursor: pointer;
}

body .ui-radiobutton-box.ui-state-active {
  background-color: #fff !important;
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-radiobutton-icon.fa-circle {
  color: #5d49f2 !important;
  padding-top: 3px;
  font-size: 14px;
}

body .ui-radiobutton .ui-radiobutton-box {
  position: relative;
  top: 0px;
}

body .ng-invalid .ui-chkbox .ui-chkbox-box {
  border: solid 1px red !important;
}

/* quill adaptive */

.ql-toolbar.ql-snow + .ql-container.ql-snow {
  @media screen and (min-width: 320px) and (max-width: 768px) {
    width: auto;
  }
}

.mat-checkbox-disabled:not(.mat-checkbox-checked) .mat-checkbox-frame {
  border-color: #a4a2b02b !important;
  background-color: #e9ecef21 !important;
}

.mat-checkbox-frame {
  border-width: 1px !important;
  border-color: #ced4da !important;
  z-index: 1;
}

.mat-checkbox-background {
  background-color: white !important;
}

.mat-checkbox-checkmark-path {
  stroke: rgba(0, 0, 0, .87) !important;
}

.select-full-width {
  .autocomplete-wrapper, .filter-autocomplete,
  .autocomplete-list,
  .select-wrapper, .project-select-input,
  .select-wrapper, .ui-inputtext.input-date,
  .ui-calendar, .select-list {
    width: 100% !important;
  }
  .ui-inputtext.input-date {
    background-position: 96%;
  }
}

body .box-checkbox {
  .ui-chkbox .ui-chkbox-box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
  }
  .ui-chkbox-box.ui-state-active {
    padding: 0;
  }
  .ui-chkbox .ui-chkbox-icon {
    position: relative;
    top: -1px;
  }
}
