/* 2020-11-02 */

/*
   Email Preferences pages
   Tables of email preferences
   Create custom radio button "checked"/"selected" indicators
*/

/**** styling for the table ****/

table {
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 4px 2px;    
}

td {
  border: 1px solid #1F1646;
  border-spacing: inherit;
}

.none {
  border: none;
}

.none:hover {
  cursor: default;
}

/* Container of a table row of Yes and No radio buttons and the Description */
tr {
  position: relative;
  cursor: pointer;
  display: table-row;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
tr input.emev-y,.emev-n,.emaddr-n,.emunall-y,.emunall-n,.delmem-y,.delmem-n,.mvus-y,.mvus-n,.alum-y,.alum-n {
  position: relative;
  opacity: 0;
  cursor: pointer;
}

/* style the radio button as a checkbox */
input[type="radio"].emaddr-y {
  appearance: none; /* removes default styling for radio button */
  border: 3px solid #0000ff;
  height: 3rem;
  margin: 0 !important; /* override styling for input[type="radio"] */
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items:center;
  
  &:checked::before {
   color: green;
   content: "\00A0\2713\00A0";
   font-weight: 800;
   font-size: 1.3rem;
   display: flex;
   justify-content: center;
   align-items:center;
  }
}


/*
  can use svg in the content property
  ref:https://stackoverflow.com/questions/19255296/is-there-a-way-to-use-svg-as-content-in-a-pseudo-element-before-or-after


  2705 checked mark in box

  ref: https://en.wikipedia.org/wiki/Geometric_Shapes_(Unicode_block)
  2610 ballot box
  25A0 square block
  25A1 white square
  25A2 white square with rounded corners
  9633 white square
  9634 white square with rounded corners
*/

/**** Create custom checked NO radio button ****/

/* Create the indicator (hidden when not checked) */
.emp_rb_n:after {
  color: #FF0000;
  content: '\2716';
  position: relative;
  text-align: center;
  top: -1.5em;
  height: 0px;
  display: none;
}

/* Show the indicator when checked */
tr input:checked ~ .emp_rb_n:after {
  display: block;
}

/**** Create a custom checked YES radio button ****/

/* Create the indicator (hidden when not checked) */
.emp_rb_y:after {
  color: SeaGreen;
  content: '\2714';
  position: relative;
  text-align: center;
  top: -1.5em;
  height: 0px;
  display: none;
}

/* Show the indicator when checked */
tr input:checked ~ .emp_rb_y:after {
  display: block;
}

/**** styling for confirmation page buttons ****/

.emb {
  border: none;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-style: normal;
  margin: 4px 2px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  !important
}
  
.emy {
  background-color: #4CAF50; /* green */
}

.emn {
  background-color: #BB5050; /* red */
}

/**** overide an NB default styling ****/

input[type="radio"] {
  margin-left: 33% !important;
}

/**** buttons ****/

.bSetSave:after {
  content: 'SAVE MY DATA';
}

.bSetTerm:after {
  content: 'TERMINATE MY DA MEMBERSHIP';
}

.bOKData:after {
  content: 'MY DATA IS OK';
}

/**** spinner ****/
.loading-spinner {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}