﻿/* 
-------- This template store all the GENERIC and REUSABLE styles ----------
CSS is though to be cascaded into the rest of controls and layouts 
All the segmentation is planned to be removed in future releases in 
order to keep all as simplest as possible.
---------------------------------------------------------------------------
color variables:
   --primary-color: __Color1__;
   --secondary-color: __Color2__;
   --third-color: __Color3__;
   --fourth-color: __Color4__;
   --fifth-color: __Color5__;
   --sixth-color: __Color6__;
   --seventh-color: __Color7__;
*/

/**** NEW ADDRESS SECTION FOR TWO COLUMNS ***/
.short-field-section-header {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   align-content: flex-start;
   justify-content: center;
   align-items: flex-start;
   background-color: #ecf2f6;
   margin-bottom: 20px;
   border-radius: 10px;
   border: 1px solid #b4c9da;
}

.short-field-section-group {
   display: flex;
   flex-wrap: wrap;
}

.short-field-control {
   display: flex !important;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-content: center;
   align-items: center;
   width: calc(50% - 0px);
}

   .short-field-control label {
      display: inline-flex !important;
      width: auto;
   }

   .short-field-control div {
      display: flex;
      width: auto;
   }
   /*****************************************/

a.tabLink:focus {
   border: 1px dashed rgb(88, 88, 88);
}

.hightlight .dca-book-print-icon {
   fill: #FFFFFF;
}

.dca-book-print-icon {
   fill: #0053cc;
}

.GlobalErrors {
   background-color: #FFFFFF;
   border: solid 1px red;
   position: fixed;
   width: 200px;
   z-index: 101;
   border-radius: 4px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   overflow-wrap: anywhere;
}

.GiftModalSave {
    background-color: #FFFFFF;
    height: 100px;
    position: fixed;
    right: 4px;
    text-align: center;
    bottom: 10%;
    z-index: 101;
    border-radius: 4px;
    transition: all 300ms ease-in-out 100ms;
}

.GiftSaveBtnModal {
    margin-top: 30px;
    margin-right: 10px;
}

   .ValidationErrors > .UPDTDataCollectionValidationMessage {
      padding: 8px;
   }
.ValidationErrors input[type="checkbox"] {
   margin-right: 6px;
   margin-top: 6px;
}
.ValidationErrors span {
   vertical-align: bottom;
}

.button-list-right {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: flex-end;
   align-items: center;
   /*flex: 1;*/
   padding: 6px 1.5em 6px 0px;
}

.button-list-left {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: center;
   justify-content: flex-start;
   align-items: center;
   flex: 1;
   padding: 6px 12px 6px 0px;
}

@media only screen and (min-width: 0px) and (max-width: 479px) {
   .dca-button {
      padding: 6px 12px;
      border-radius: 24px;
      color: #FFFFFF;
      background-color: rgb(88, 88, 88);
      display: inline-block;
      border-style: none !important;
      margin-left: 12px;
      margin-right:12px;
      line-height: 16px;
      color:white!important;
   }

      .dca-button:hover {
         background-image: none !important;
         background-color: rgb(120, 120, 120) !important;
      }

         .dca-button:hover .ui-icon {
            background-color: rgb(120, 120, 120)
         }

   .dca-button-text {
      color: #FFFFFF;
      display: inline-block;
      text-transform: uppercase;
      vertical-align: middle;
   }

   .row {
      margin-left: auto !important;
   }

   body {
      line-height: 15px !important;
   }

   p {
      margin: 0px !important;
   }

   .DefaultWrapperTable {
      width: 100%;
      border: none;
      padding-bottom: 48px;
   }

   div.DCAContainer {
      display: block;
      z-index: 1;
      width: 100%;
      background-image: none;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
      height: auto;
   }
}

@media only screen and (min-width: 480px) and (max-width: 767px){
    .dca-button {
        padding: 6px 12px;
        border-radius: 24px;
        color: #FFFFFF;
        background-color: rgb(88, 88, 88);
        display: inline-block;
        border-style: none !important;
        margin-left: 12px;
        margin-right: 12px;
        line-height: 16px;
        color: white !important;
    }

      .dca-button:hover {
         background-image: none !important;
         background-color: rgb(120, 120, 120) !important;
      }

         .dca-button:hover .ui-icon {
            background-color: rgb(120, 120, 120)
         }

   .dca-button-text {
      color: #FFFFFF;
      display: inline-block;
      text-transform: uppercase;
      vertical-align: middle;
   }

   .row {
      margin-left: auto !important;
   }

   body {
      line-height: 15px !important;
   }

   p {
      margin: 0px !important;
   }

   .DefaultWrapperTable {
      width: 100%;
      border: none;
      padding-bottom: 48px;
   }

   div.DCAContainer {
      display: block;
      z-index: 1;
      width: 100%;
      background-image: none;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
      height: auto;
   }
}

@media only screen and (min-width: 768px) and (max-width: 991px){
    .dca-button {
        padding: 6px 12px;
        border-radius: 24px;
        color: #FFFFFF;
        background-color: rgb(88, 88, 88);
        display: inline-block;
        border-style: none !important;
        margin-left: 12px;
        margin-right: 12px;
        line-height: 16px;
        color: white !important;
    }

      .dca-button:hover {
         background-image: none !important;
         background-color: rgb(120, 120, 120) !important;
      }

         .dca-button:hover .ui-icon {
            background-color: rgb(120, 120, 120)
         }

   .dca-button-text {
      color: #FFFFFF;
      display: inline-block;
      text-transform: uppercase;
      vertical-align: middle;
   }

   .row {
      margin-left: auto !important;
   }

   body {
      line-height: 15px !important;
   }

   p {
      margin: 0px !important;
   }

   .DefaultWrapperTable {
      width: 100%;
      border: none;
      padding-bottom: 48px;
   }

   div.DCAContainer {
      display: block;
      z-index: 1;
      width: 100%;
      background-image: none;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
      height: auto;
   }
}

@media only screen and (min-width: 992px){
    .dca-button {
        padding: 6px 12px;
        border-radius: 24px;
        background-color: rgb(88, 88, 88);
        display: inline-block;
        border-style: none !important;
        margin-left: 12px;
        margin-right: 12px;
        line-height: 16px;
        color: white !important;
    }

      .dca-button:hover {
         background-image: none !important;
         background-color: rgb(120, 120, 120) !important;
      }

         .dca-button:hover .ui-icon {
            background-color: rgb(120, 120, 120)
         }

   .dca-button-text {
      color: #FFFFFF;
      display: inline-block;
      text-transform: uppercase;
      vertical-align: middle;
   }

   .row {
      margin-left: auto !important;
   }

   body {
      line-height: 15px !important;
   }

   p {
      margin: 0px !important;
   }

   .DefaultWrapperTable {
      width: 100%;
      border: none;
      padding-bottom: 48px;
   }

   div.DCAContainer {
      display: block;
      z-index: 1;
      width: 100%;
      background-image: none;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
      height: auto;
   }
}