/***************************************************
  Generic CapturePoint Modal
  created by: A Pinzone (07/28/2016)

  10/27/2016 APinzone (Ticket 23742)
  - Global changes for better display of the modal in all situations.
  12/07/2016 APinzone (Ticket CP23871)
  - Removed global padding and margin reset. 
  03/06/2017 APinzone (Ticket FO24700)
  - Made modal table styling more specific. Was causing problems with datepicker. 
  04/05/2017 A PINZONE (TICKET FO24700)
  - Default modal sizing adjustments. 
  04/12/2017 A PINZONE (TICKET CP24930)
  - Reduced max-width of modal on desktop and tablet.
  - Fixed modal overlay issue.  
  08/15/2017 A PINZONE (TICKET CP26960)
  - Adjustments to account for new custom options for max-height and max-width.
  10/03/2019 P ROGERS (TICKET CP19965)
  - Design adjustments for family filter icons, turned off border and padding in .modal-body-container select, added grids section
  10/23/2019 R ROCHE (TICKET CP19965)
  - Added styling to fix the error's in the modal
  11/04/2019 R ROCHE (TICKET CP19965)
  - Fixed class to only affect the modal's labels with the .right class
***************************************************/

* {
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

/***********************************
  MODAL
***********************************/
#modal-overlay {
  background: #000;
  display: none;
  opacity: .85;
  height: 100%;
  position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 1;}
#modal-box {
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px #000;
  display: none;
  font-family: 'Open Sans', Verdana, Arial, sans-serif;
  font-size: 16px;
  height: 100%;
  margin: 0;
  /*overflow: auto;*/
  position: fixed;
    top: 0; left: 0;
  width: 100%;
  z-index: 2;}
  #modal-box ul,
  #modal-box ol,
  #modal-box li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;}
  #modal-box ul::after,
  #modal-box ol::after {
    clear: both;
    content: '';
    display: table;  }
  #modal-box .no-padding {
    padding: 0;  }
  .modal-container {
    height: 100%;
    /*overflow: hidden;*/
    position: relative;
    padding: 45px 0 140px;
  }
  .modal-header {
    background: #315E89;
    color: #fff;
    height: 45px;
    line-height: 45px;
    margin-top: -45px;
    padding: 0 20px;
    position: relative;}
    .modal-header .modal-title {
      background: #315E89;
      color: #fff;
      font-size: 16px;
      margin: 0;
      padding: 0 20px 0 0;}
    .modal-header .modal-close {
      cursor: pointer;
      font-size: 22px;
      position: absolute;
        top: 50%;right: 20px;
      transform: translateY(-50%);}
  .modal-body {
    position:absolute;
      top: 45px; bottom: 55px;
    overflow: auto;
    padding-bottom: 15px;
    width: 100%; }
    .modal-body .modal-sub-title {
      background: #757d85;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      margin: 0;
      padding: 3px 5px;}
    .modal-body .modal-body-container {
      padding: 15px;}
      .modal-body .modal-body-container p {
        margin: 0 0 10px 0;
        font-size:.8em;}
      .modal-body .modal-body-container .form-wrapper {
        padding: 15px 0;
        max-width: 400px;
        margin: 0 auto;
        width: 100%; }
        .modal-body .modal-body-container input,
        .modal-body .modal-body-container textarea,
        .modal-body .modal-body-container select {
          /* border: 1px solid #aaa; */
          box-sizing:border-box;
          color: #666;
          font-size: 85%;
          /* padding: 10px; */
          width: 100%;}
          .modal-body .modal-body-container .modal-select-box {
            border: 1px solid #aaa;
            color: #666;
            font-size: 85%;
            margin: 0 auto;
            max-width: 300px;
            position: relative;
            width: 100%; }
            .modal-body .modal-body-container .modal-select-box:after {
              color: #999;
              content:'\f078';
              cursor: pointer;
              font-family: 'FontAwesome';
              font-size:18px;
              pointer-events:none;
              position: absolute;
                top: 50%; right: 10px;
              transform:translateY(-50%);
              }
            .modal-body .modal-body-container .modal-select-box select {
              -moz-appearance: none;
              -webkit-appearance: none;
              border: 0;
              cursor: pointer;
              font-size: 100%;
              height: 100%;
              width: 100%;}
        .modal-body .modal-body-container label {
          display: block;
          font-weight: bold;
          margin-bottom: 5px;
          padding-top:5px;}
        .modal-body .modal-body-container label.required {
          color: red;}
        .modal-body .modal-body-container .error-msg {
          color: red;
          text-align: center;
          font-size: 90%;
          display: block;
        }
  .modal-footer {
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    box-shadow: 0 1px 0 #fff inset, 0 -1px 10px #ccc;
      -moz-box-shadow: 0 1px 0 #fff inset, 0 -1px 10px #ccc;
      -webkit-box-shadow: 0 1px 0 #fff inset, 0 -1px 10px #ccc;
      -o-box-shadow: 0 1px 0 #fff inset, 0 -1px 10px #ccc;
      -ms-box-shadow: 0 1px 0 #fff inset, 0 -1px 10px #ccc;
    /*height: 55px;*/
    height: auto;
    padding: 10px;
    position: absolute;
      bottom: 0;
    text-align: center;
    width: 100%;}
    .modal-footer .btn {
      background: #315e89;
      border: 0;
      border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
      box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      height: 35px;
      line-height: 35px;
      margin: 0 1.5% 5px;
      max-width: none;
      text-align: center;
      text-transform: uppercase;
      /*width: 30%;*/
      width: 100%;
      -webkit-appearance: none;
      -moz-appearance: none; }
      .modal-footer .btn a {
        color: #fff;
        font-weight: 600;
        text-decoration: none;}
      .modal-footer .btn.btn-gray {
        background: #757d85;}
      .modal-footer .btn.btn-yellow {
        background: #e29905;}
      .modal-footer .btn.btn-left { float: left; }
      .modal-footer .btn.btn-right { float: right; }
      .modal-footer .btn.btn-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%); }
      .modal-footer .btn[disabled=disabled],
      .modal-footer .btn:disabled {
        background: #e9e9e9 !important;
        color: #aaa !important;
        cursor: default !important; }
  .modal-btn {
    cursor: pointer;}

/* Mobile Custom Size Override */
@media screen and (max-width: 640px) {
  #modal-box {
    height: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important; 
  }
  .modal-body { bottom: 101px; }

  .modal-footer .btn {
    margin: 5px 0;
  }
}

/* Tablet */
@media screen and (min-width: 641px) {
  #modal-box {
    margin: 0;
    height: 50%;
    max-height: 90%;
    min-width: 600px;
    max-width: 700px;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%); }
    .modal-container {
      padding: 45px 0 55px; }
      .modal-footer {
        height: 55px; } 
      .modal-footer .btn {
        font-size: 10px;
        width: 30%; } 
}
/* Desktop */
@media screen and (min-width: 981px) {
  #modal-box {
    max-height: 800px;
    max-width: 800px;
    width: auto; }
    .modal-footer .btn {
      font-size: 12px;  }
}


/***********************************
  MODAL TABLE
***********************************/
.modal-body-container > table {
  border-color: #aaa;
  border-style: solid;
  border-width: 1px 0 0 1px;
  margin: 0;
  width: 100%;
}
.modal-body-container > table th,
.modal-body-container > table td {
  border-color: #aaa;
  border-style: solid;
  border-width: 0 1px 1px 0;
  font-size: 12px;
  vertical-align: middle;
}
.modal-body-container > table th {
  background: #ddd;
  color: #222;
  font-weight: bold;
  padding: 5px 8px;
  text-transform: uppercase;
}

/* Tablet */
@media screen and (min-width: 641px) { }

/* Desktop */
@media screen and (min-width: 981px) { }


/**********************************************
  GRIDS
***********************************************/
.grid-container {
  width: 100%; }
  .grid-container * {
    box-sizing: border-box; }
  .grid-container:after {
    display: block;
    content: '';
    clear: both; }

.grid-container .formTextbox,
.grid-container .formTextarea,
.grid-container .formSelect {
  max-width: none; }

/*.grid-container .formTextbox,
.grid-container .formTextarea {
  padding: 0;
}*/

.grid-container .formTextbox label,
.grid-container .formTextarea label,
.grid-container .formSelect label {
  font-size: 12px;}
  .grid-container .formTextbox.small label {
    font-size: 11px;}

.grid-container .formTextbox input,
.grid-container .formTextarea textarea,
.grid-container .formSelect .selectBox,
.grid-container .formCheckbox,
.grid-container .formRadio {
  margin-bottom: 0; }

[class*='col-'] label {
  display: inline;
  font-weight: 600;
  max-width: none;
  margin: 0;
}

.row:before,
.row:after {
  content: "";
  display: table;
  clear: both;}

.row.priceOver {
  padding: 2px 5px 2px 5px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

[class*='col-'] {
  float: left;
  min-height: 1px;
  width:16.66%;
  padding: 6px; /* Gutter */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;}

/* As needed gutter options */
[class*='col-'].gutterNone { padding:0; }
[class*='col-'].gutterTB { padding: 6px 0; }
[class*='col-'].gutterLR { padding: 0 6px; }
[class*='col-'].gutterRight { padding: 0 6px 0 0; }
[class*='col-'].gutterLeft { padding: 0 0 0 6px; }
[class*='col-'].gutterTop { padding: 6px 0 0 0; }
[class*='col-'].gutterBottom { padding: 0 0 6px 0; }

/*** 4 COLUMNS ***/
.col-1-4 { width: 25%;  }
.col-2-4 { width: 50%;  }
.col-3-4 { width: 75%;  }
.col-4-4 { width: 100%; }

/*** 6 COLUMNS ***/
.col-1 { width: 16.66%;  }
.col-2 { width: 33.33%;  }
.col-3 { width: 50%;     }
.col-4 { width: 66.664%; }
.col-5 { width: 83.33%;  }
.col-6 { width: 100%;    }

/*** 15 COLUMNS ***/
.col-1-15  { width: 6.66%;  }
.col-2-15  { width: 13.33%; }
.col-3-15  { width: 19.98%; }
.col-4-15  { width: 26.64%; }
.col-5-15  { width: 33.33%; }
.col-6-15  { width: 39.96%; }
.col-7-15  { width: 46.62%; }
.col-8-15  { width: 53.28%; }
.col-9-15  { width: 59.94%; }
.col-10-15 { width: 66.6%;  }
.col-11-15 { width: 73.26%; }
.col-12-15 { width: 79.92%; }
.col-13-15 { width: 86.58%; }
.col-14-15 { width: 93.24%; }
.col-15-15 { width: 100%;   }

@media all and (max-width:768px) {
  .col-1-4 { width: 50%; }
  .col-3-4 { width: 100%; }

  .col-1 { width: 33.33%; }
  .col-2 { width: 50%;    }
  .col-3 { width: 83.33%; }
  .col-4 { width: 100%;   }
  .col-5 { width: 100%;   }
  .col-6 { width: 100%;   }

  .row .col-2:last-of-type { width: 100%; }
  .row .col-5 ~ .col-1     { width: 100%; }
}

@media all and (max-width: 640px) {
  .col-2-4 { width: 100%; }
  
  .col-1 { width: 50%;  }
  .col-2 { width: 100%; }
  .col-3 { width: 100%; }
  .col-4 { width: 100%; }
  .col-5 { width: 100%; }
  .col-6 { width: 100%; }

  .tbl,
  .tblRow,
  .tblCell { display: block; }
}

/***********************************
  MODAL ERROR HANDLING
***********************************/
#modal-box .errorMsg {
  color: #e15554;
  background-color: transparent;
  border: none;  
  padding: 0;
  margin: 5px 0 0 0;
  font-size: 14px;
}


#modal-box input.error,
#modal-box select.error,
#modal-box textarea.error {
  background-color:#FBEEEE;
  border-color:#e15554;
}

#modal-box .mt-sm {
  margin-top: 4px;
}

#modal-box ul.has-icons,
#modal-box ul.has-icons li {
  margin-left: 1em;
  line-height: 1.5;
  list-style-type: disc;
  position: relative;}
/*  other styles added for 19965 */

.individualTitle {
  background: #eaeaea;
  border: solid #aaa;
  border-width: 1px 0;
  color: #405A6B;
  font-size: 16px;
  font-weight: 600;
  margin: 0px -15px 10px -15px;
  padding: 5px 15px;
  position: relative;
  text-transform: uppercase;
}

.eligLabel { padding-top: 12px !important; }

@media all and (max-width: 768px) {
  .eligLabel { text-align: left; }
}


#modal-box label.right {
  text-align: right;
}



/* Brought over from primary_stylesheet.css */
/* Required Fields */
.formTextbox.required input,
.formTextarea.required textarea,
.select-div.required > .selectBox, 
.select-div.required .chosen-container-multi .chosen-choices { border-left: 3px solid #E15554 !important; }

.formFile.required input[type='file'] + label > .chosenFile,
.formCheckbox.required input[type=checkbox] + .labelText:before,
.formCheckbox.required input[type=checkbox]:checked + .labelText:before,
.formRadio.required input[type=radio] + .labelText:before,
.formRadio.required input[type=radio]:checked + .labelText:before { 
  color: #E15554; }


/* Brought over from primary_stylesheet.css */
#errorboxout, .errorboxout {
  background: #e15554;
  border-radius: 3px;
  color: white;
  overflow:hidden;
  margin-bottom:10px;
  padding: 5px 5px 5px 50px;
  position: relative; }
  #errorboxout:before, .errorboxout:before {
    content: '\f071';
    font-family: 'FontAwesome';
    font-size: 26px;
    position: absolute;
      left: 13px; top: 13px; }
  #errorboxout > h4, .errorboxout > h4 {
    font-weight: bold; }
  #errorboxout > .errorbox, .errorboxout > .errorbox {
    font-size: 90%;
    margin: 5px 0;
    padding: 0 0 0 20px; }