@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap');


input {
padding: 0px;
    border: none;
    border-radius: 0px;
    font-size: 1em;
    width: 100px;
}

:root {
  --otBlue: #0073c6;
}

body {
	font-family: 'Open-sans', sans-serif;
}
th {
	font-weight: normal;
}
a {
	color: darkblue;
	text-decoration: none;
}
th {
	vertical-align: top;
}


td#PerpetualTotal, td#tdProduct, td#tdMaintaince, td#tdSubscription, td#TotalCost {
    line-height: 40px;
}



div#platformMicrosoft, div#platformDomino {
    border: 2px solid var(--otBlue);
    padding: 12px 20px;
    border-radius: 10px;
	width:120px;
	
}



input[type=checkbox] {
	cursor: pointer;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
	    margin-right: 8px;
} 
label {
	cursor: pointer;
}

#platforms {	
	width: 100%;
	display: flex;
	gap: 20px;
	justify-content: center;
	text-align: center;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.25em;
	margin-bottom: 50px;
}
#platforms .selected {
	    width: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: var(--otBlue);
    color: #fff;
	width:120px;
}

#platformMicrosoft {
	width: auto;
	text-align: center;
	cursor: pointer;	
}

#platformDomino {
	width: auto;
	text-align: center;
	cursor: pointer;
}

table#tablePrices{
width: 100%;
margin-top:20px;}



#box {
	width: 100%;
	display: flex;
	gap: 20px;
	justify-content: left;
	margin-bottom: 0px;
	margin-top:34px;
}

.users {
	width: 115px;
	text-align: right;
}
.currency,.periode {
	width: 115px;
	text-align: left;
}

.periode{
padding-left:16px;
}

#selectUsers {
	width: 100%;
}

#selectCurrency {
	width: 70px;	
}

.trHead {
	height: 16px;
}
.thProduct {	
	width: 200px;
	text-align: left;
}

.thMaintaince {
	width: 15%;
}
.thSubscription {
	padding-left: 50px;

}
.thText2 {
	font-size: 0.7em;
}


.line {
	border-bottom: 1px solid var(--otBlue)
}

.tdProduct {
}
.tdPerpetual {
	text-align: right;
	width: 20%;
}
.tdMaintaince {
	text-align: right;
}
.tdSubscription {
	text-align: right;
}

.trTotal .tdProduct {
	padding: 5px 0;
}

.trTotalCost .tdProduct {
	padding: 5px 0;
}
.trTotalCost .tdPerpetual {
	text-align: center;
	padding-top: 3px;
	border-top: 1px solid var(--otBlue)
}

.users{
    width: auto;
}

.usersText, .currencyText, .periodeText {
    color: var(--otBlue);
    font-size: 1em;
    font-weight: 600;
    text-align: left;
}

/*select#selectUsers, select#selectCurrency, select#selectPeriode, input#enterLicenses {
    padding: 8px !important;
	border-radius: 4px !important;
border: 1px solid #000 !important;
background: #FFF !important;
	font-size: 1em !important;
    font-weight: 400 !important;
}*/



select#selectUsers, select#selectCurrency, select#selectPeriode, input#enterLicenses {
  appearance: none;
  /* safari */
  -webkit-appearance: none;
  /* other styles for aesthetics */
  font-size: 1rem;
  padding: 8px 8px 8px 16px;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 8px;
  color: #000 !important;
  cursor: pointer;
}




select#selectUsers{
width: 165px;}

select#selectCurrency {
	width:130px;}


.thProduct, .thPerpetual, .thMaintaince, .thSubscription{
color: #000;
font-family: Barlow;
font-size: 1em;
font-style: normal;
font-weight: 700;
line-height: normal;
	text-align: right;
	padding-bottom:8px;
	letter-spacing: 0.4px;
}

.thProduct {
    text-align: left;
/*	width: auto;*/
}

.thText2{
color: #000;
font-family: Barlow;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;}


tr.trModule, tr.tdProduct  {
    line-height: 2.5em;
	color: #A9A9A9;
}



.line{
border-bottom: 2px solid var(--otBlue);
	
}

.enabled{
color: #000000;
	background-color:#fafafa;
}




tr.trModule:hover {
    background-color:#EAF3FB;
}
.selected_row {
    background-color: #CCCCCC !important;
    color: #FFFFFF;
}
tr {
    cursor: pointer;
    * cursor: hand;
}

.trLine .tdProduct{
	padding: 2px 0px 2px 0;
}


.trLine .tdSubscription {
    padding: 0;
}

.tdPerpetual, .tdMaintaince{
background-color:#7f7f7f14;
}

.tdSubscription{
background-color:#fcb54117;
}

#perUser, #footnote {
    position: relative;
margin-left: 0px;
    justify-content: left;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#perUser .perpetual {
    background-color: none !important;
}


#perUser .perpetual .head {
    color: #000;
    text-align: center;
    font-family: Barlow;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
	border-radius: 8px 8px 0 0;
	background-color: #B8B8B8;
	padding:10px;
	    border-bottom: none;
}

#perUser .subscription .head {
    color: #000;
    text-align: center;
    font-family: Barlow;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
	background-color: #fcb54187;
    border-radius: 8px 8px 0 0;
		padding:10px;
	border-bottom: none;
}


#perUser .subsequent {
margin: 0px;
font-size: 0.8em;
border-top: none;
	    align-self: stretch;
    color: #727272;
    text-align: center;
    font-family: Barlow;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
	padding-bottom: 16px !important;
	background-color: #F5F5F5;
	border-radius: 0px 0px 8px 8px !important;
}

#perUser .box {
    border: none;
    width: 200px;
}


#perUser .value {
    color: #0072C6;
    text-align: center;
    font-family: Barlow;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
	    padding-top: 20px;
    padding-bottom: 0px;
	    border-top: 2px #fff solid;
	background-color: #F5F5F5;
}

.first {
    align-self: stretch;
    color: #727272;
    text-align: center;
    font-family: Barlow;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
	padding-bottom: 16px !important;
	padding-top: 0px !important;
	background-color: #F5F5F5;
}

#perUser .perpetual, #perUser .subscription  {
    background-color: #ffffffff !important;
}


#perUser .title {
    position: relative;
    margin-top: 50px;
    font-weight: bold;
	
	color: #000 !important;
text-align: center!important;
font-family: Open Sans !important;
font-size: 20px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: normal !important;
	margin-bottom: 20px
}

tr#trCore {
    height: 36px !important;
}

.thPerpetual {
	width: 20% !important;
}

.thSubscription {
	width: 20% !important;
}

.thProduct{
width: auto;
}