* {
    box-sizing: border-box;
}

body {
    font: 16px Arial;
}

.sortable-table {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 15px !important;
}

.sortable-table thead th {
    cursor: pointer;
	padding: 20px 10px !important;
}

.sortable-table thead th:after {
    padding-left: 7px
}

.sortable-table thead th[data-sort-direction="0"]:after {
    content: "\21D5"
}

.sortable-table thead th[data-sort-direction="1"]:after {
    content: "\25B4"
}

.sortable-table thead th[data-sort-direction="-1"]:after {
    content: "\25BE"
}

.sortable-table.sortable-fa-icons thead th:after {
    font-family: FontAwesome
}

.sortable-table.sortable-fa-icons thead th[data-sort-direction="0"]:after {
    content: "\f0dc"
}

.sortable-table.sortable-fa-icons thead th[data-sort-direction="1"]:after {
    content: "\f0de"
}

.sortable-table.sortable-fa-icons thead th[data-sort-direction="-1"]:after {
    content: "\f0dd"
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: center
}

table tr td:nth-child(1) {
    text-align: left
}

td, th {
    padding: 10px;
    border: 1px solid #e8e2e2
}

thead {
    background: #643197;
    color: #fff
}

.buy-now {
    background: #643197;
    border: none;
    color: #fff;
    padding: 10px
}

.buy-now .fa-cog {
    font-size: 15px
}

.fa-linux {
    color: #f00;
    font-size: 30px
}

.fa-windows {
    color: #00f;
    font-size: 30px
}

.f32 .flag {
    padding-left: 45px;
    width: 100% !important;
}

.autocomplete {
/*     position: relative;
    display: inline-block; */
}

input {
    border: 1px solid transparent;
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 16px;
}

input[type=text] {
    background-color: #f1f1f1;
    width: 100%;
}

input[type=submit] {
    background-color: DodgerBlue;
    color: #fff;
    cursor: pointer;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    background-color: #e9e9e9;
}

.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}
.gbp {
	display: none;
}

@media (max-width: 768px) {
	.sortable-table.f32 {
		display: table;
		width: max-content;
		overflow: scroll;
	}
}

.osp_flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
  }
  .osp_flex-item {
    flex: 1 1 calc(25% - 20px);
    box-sizing: border-box;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    position: relative;
  }
  .osp_flex-in_row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: space-between;
  }
  .osp_flex-in_item {
    flex: 1 1 calc(100% - 20px);
    box-sizing: border-box;
  }
  .osp_flex-in_item-left {
    flex: 1 1 calc(40% - 20px);
    box-sizing: border-box;
  }
  .osp_flex-in_item-right {
    flex: 1 1 calc(60% - 20px);
    box-sizing: border-box;
  }
  @media (max-width: 768px) {
    .osp_flex-item {
      flex: 1 1 calc(50% - 20px);
    }
  }
  @media (max-width: 480px) {
    .osp_flex-item {
      flex: 1 1 100%;
    }
  }
  .plan_grid .osp_flex-in_row {
    font-size: 13px;
    padding: 3px 0;
    border-bottom: 2px dotted #ccc;
  }
  .plan_grid .name {
    font-size: 12px;
  }
  .plan_grid .variant {
    font-size: 20px;
    font-weight: bold;
  }
  .plan_grid .osp_flex-in_row:last-child {
    border: none;
    padding-bottom: 35px;
  }
  .plan_grid .osp_flex-in_item-left  {
    font-weight: 700
  
  }
  .plan_grid .buy-now {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: calc(100% - 40px) !important;
    ;
  }