html,body 

{
	background-color:#FFF; 

	height:100%;

	margin: 0px;
	padding: 0px;

	font-family: 'myriad', Arial, geneva, sans-serif;
  font-size: 18px;
  font-weight: normal;
	color: #333;
}


/* ---------------------------------------------------------------------
   -- Font Faces
*/

@font-face 
{
    font-family: 'myriad';
    src: url('fonts/myriad-set-pro_text.eot');
    src: url('fonts/myriad-set-pro_text.eot') format('embedded-opentype'),
         url('fonts/myriad-set-pro_text.woff2') format('woff'),
         url('fonts/myriad-set-pro_text.ttf') format('truetype'),
         url('fonts/myriad-set-pro_text.svg#MyriadSetPro-Text') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face 
{
    font-family: 'myriadBold';
    src: url('fonts/myriad-set-pro_bold.eot');
    src: url('fonts/myriad-set-pro_bold.eot') format('embedded-opentype'),
         url('fonts/myriad-set-pro_bold.woff2') format('woff'),
         url('fonts/myriad-set-pro_bold.ttf') format('truetype'),
         url('fonts/myriad-set-pro_bold.svg#MyriadSetPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face 
{
  font-family: 'myriadUltraLight';
  src: url('fonts/myriad-ultralight.eot');
  src: url('fonts/myriad-ultralight.eot') format('embedded-opentype'),
       url('fonts/myriad-ultralight.woff') format('woff'),
       url('fonts/myriad-ultralight.ttf') format('truetype'),
       url('fonts/myriad-ultralight.svg#MyriadProUltraLight') format('svg');
  /* font-weight: Ultra lighter; */
  font-style: normal;
}



/* ---------------------------------------------------------------------
-- Init overlay for page before vuejs is initialized
*/
#globalOverlay
{
  position:fixed;
  z-index:95;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:#FFF;
}

.label
{
	display:block;
	font-size: 16px;
	color: #313131;
	text-transform: uppercase;
}


/* ---------------------------------------------------------------------
   -- Sticky Footer
   */
   .page-wrap {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -340px; 
  }
  .page-wrap:after {
    content: "";
    display: block;
  }
  .page-footer, .page-wrap:after {
    height: 340px; 
  }
  .page-footer
  {
    background-color: #4b4b4b;
  }
  
  .content
  { 
      max-width: 1100px;
      min-width:364px;
      text-align:left; 
  }

  
/* ---------------------------------------------------------------------
   -- Top menu
*/
.topHeaderBar
{
  position:fixed;
  top:0;
  z-index:98;
  width:100%;
  height:80px;
  background-color:rgba(255,255,255,.85);
  box-shadow: 0 0 15px rgba(0,0,0,.1)
}

.topHeaderBar .mainBtn
{
  position:relative;
  display:inline-block;
  margin:21px 0;
  padding:0px 18px;
  font-size:24px;
  color:#a58cc3;
  border-right:1px solid #4b4b4b;
}

.topHeaderBar .mainBtn:last-child
{
  border-right: none;
}

.topHeaderBar .mainBtn i
{
  padding:7px 12px;
  cursor:pointer;
  border-radius:3px;
  transition: all .3s;
}

.topHeaderBar .mainBtn i:hover
{
  background-color:rgba(165, 140, 195,.85);
  color:#FFF;
}

.topHeaderBar .mainBtn .basketItemsCount
{

  pointer-events: none;

  position:absolute;
  top:2px;
  right:20px;
  font-size:8px;
  font-weight:bold;
  width:14px;
  height:14px;
  text-align:center;
  padding-top:2px;
  border-radius:50%;
  background-color:#8ec244;
  color:#FFF;
  border:1px solid rgba(255,255,255,.5);
}

/* ---------------------------------------------------------------------
   -- Main menu
*/
.mainMenu
{
  display:none;
  position:absolute;
  z-index:25;
  top:80px;
  right:0;
  padding:0;
  max-width: 400px;
  min-width:350px;
  background-color: rgba(101,45,144,.95);
  color:#FFF;
  text-align:left;
  font-size: 18px;
  font-family: 'myriadBold',arial, tahoma, sans-serif;
  font-weight: bold;
}

.mainMenu ul
{
  margin: 0;
  padding: 0;
  list-style: none outside none;
}

.mainMenu ul > li > div
{
    margin: 0;
    padding: 15px  10px 15px 30px;
    cursor: pointer;

    transition: all .3s;
}

.mainMenu ul > li > div:hover
{
  background-color:rgba(255,255,255,.15);
}

.mainMenu ul > li > ul
{
  display:none;
}

.mainMenu ul > li > ul li
{
    margin: 0;
    padding: 10px  10px 10px 50px;
    cursor: pointer;
    font-family: 'myriadUltraLight',arial, tahoma, sans-serif;
    font-weight: bold;
    transition: all .3s;
}

.mainMenu ul > li > ul li:hover
{
  background-color:rgba(255,255,255,.15);
}

.mainMenu ul > li > ul li:before {
  content: "-";
  padding-right: 5px;
}

/* ---------------------------------------------------------------------
   -- Login/Register
*/

.loginRegister
{
  display:none;
  position:absolute;
  font-size:14px;
  z-index:24;
  top:80px;
  right:0;
  padding:5px;
  /*width: 320px;*/
  width: 350px;
  background-color: rgba(255,255,255,.95);
  text-align:left;
  border-radius: 0 0 0 4px;
  box-shadow: -5px 5px 10px rgba(0,0,0,.1)
}

/* ---------------------------------------------------------------------
   -- Search Form
*/

.searchForm
{
  display:none;
  position:absolute;
  z-index:24;
  top:80px;
  right:0;
  padding:5px;
  width: 320px;
  background-color: rgba(255,255,255,.85);
  text-align:left;
  border-radius: 0 0 0 4px;
  box-shadow: -5px 5px 10px rgba(0,0,0,.1)
}

.searchForm .searchSubmit
{
  position:absolute;
  z-index:2;
  top:10px;
  right:8px;
  background:none;
  padding:5px;
  border:none;
  color:#a58cc3;
  font-size:18px;
}


/* ---------------------------------------------------------------------
   -- Basket
*/

.basketCart
{
  display:none;
  position:absolute;
  font-size:14px;
  z-index:24;
  top:80px;
  right:0;
  padding:5px;
  width: 450px;
  background-color: rgba(255,255,255,.95);
  text-align:left;
  border-radius: 0 0 0 4px;
  box-shadow: -5px 5px 10px rgba(0,0,0,.1)
}

.basketCartLoader, .loginRegisterLoader {
  display: none;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .75);
  z-index: 10;
}

/* ---------------------------------------------------------------------
   -- Basket
*/
  .checkoutAccord
  {
      margin:30px 50px;
  }

  .checkoutAccord .accord
  {
      position:relative;
      padding:12px 20px;
      margin-bottom:5px;
      background-color:#652d90;
      color:#FFF;
      border-radius:5px;
      cursor:pointer;
  }

  .checkoutAccord .accord.active
  {
      border-radius:5px 5px 0 0 ;
  }

  .checkoutAccord .accord.active i:last-child
  {
      transform: rotate(90deg);
  }

  .checkoutAccord .accord i:first-child
  {
      margin-right:10px;
  }

  .checkoutAccord .accord i:last-child
  {
      position:absolute;
      right:20px;

      transition:all .3s;
  }

  .checkoutAccord .accord.disabled
  {
      cursor:default;
      background-color:#c4c4c4;
      border-radius:5px;
  }

  .checkoutAccord .accordContent
  {
      display:none;
      padding:12px 40px;
      position:relative;
  }

/* ---------------------------------------------------------------------
   -- Breadcrums
*/

.breadcrums
{
  position:absolute;
  top:80px;
  width:100%;
  background-color:#f4f4f4;
  padding:15px 20px;
  text-align:left;
}

.breadcrums ul
{
  margin: 0;
  padding: 0;
  padding-left:10px;
  list-style: none outside none;
}

.breadcrums ul > li
{
  display:inline-block;  
  margin: 0;
}

.breadcrums ul > li a
{
  color: #5b2988 !important;
}

.breadcrums ul > li:not(:first-child):before
{
  content: '\f178';
  font-family: 'FontAwesome', 'Arial Unicode MS';
  color: #b1b1b1;
  margin:5px 20px;
  font-size:16px;
      
  cursor: default !important;
}


/* ---------------------------------------------------------------------
   -- H1, H2
   */
   h1 {
    font-family: 'myriadUltraLight',arial, tahoma, sans-serif;
    font-size: 48px;
    letter-spacing: -1px;
    color: #333;
    margin:0 0 10px 0;
  }
  h2 {
    font-family: 'myriadUltraLight',arial, tahoma, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color:#611e7a;
    margin: 0px;
  }
  h3 {
    font-family: 'myriadUltraLight',arial, tahoma, sans-serif;
    font-size: 28px;
    font-weight:lighter;
    margin: 0px;
  }
  
  
  /* ---------------------------------------------------------------------
     -- HR
     */
  hr{ background-color: #CCCCCC; height: 1px; border: 0px;}
  
  
  /* ---------------------------------------------------------------------
     -- A
     */
  A:link {color: #802cc0;	text-decoration: none;}
  A:visited {color: #802cc0;	text-decoration: none;}
  A:hover {color: #901ee7;}
  
  
  /* ---------------------------------------------------------------------
     -- STANDARD INPUT TAGS DEFINITION 
     */
  input[type=text],input[type=password],input[type=number],input[type=email], textarea
  {
      box-sizing:border-box;
      font-family:   Arial, Tahoma, Helvetica, sans-serif;
      border: 1px solid #d8d8d8;
      font-size: 16px;  
      color: #333;
      padding: 10px 15px;
      background-color:#fafafa;
      border-radius:3px;
      margin:1px;
      
      width:100%;
  }

  input[type=text]:disabled,input[type=password]:disabled,input[type=number]:disabled, textarea:disabled, input[type=text]:read-only
  {
    color:#aaa;
  }
  
  select
  {	
      -webkit-appearance: none; 
          
      box-sizing:border-box;
      font-family:   Arial, Tahoma, Helvetica, sans-serif;
      border:none;
  /*
      background-color:#fff;
      border: 1px solid #d7d7d7;
  */
      font-size: 16px;  
      color: #333;
      padding: 9px 25px 9px 15px;
      border-radius:0;
  }
  
  .divSelect
  {
      display:inline-block;
      border: 1px solid #d8d8d8;
      background-color:#fafafa;
      border-radius:3px;
      margin:1px;
  }
  
  .divSelect:after
  {
      content:'\f107';
      font-family:'FontAwesome';
      font-size:16px;
      position:absolute;
      margin-left:-20px;
      margin-top:10px;
      pointer-events:none;
  }
  
  option
  {
      padding:5px 10px;
      color: #333;
  }
  
  optgroup
  {
      color: #CCC;
  }
  
  input.error, textarea.error,select.error {
    background-color:#FEFCA9 !important;
      /* border: 2px solid #b52a2a !important; 
      margin:0 !important; */
  }
  input[type=email]:valid {
    background-image: url(../img/circle-checked.svg);
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
    /* background-origin: content-box; */
  }
  input[type=email]:not(:placeholder-shown):invalid, input[type=email].error, input[type=email]:placeholder-shown.warning {
    /* background-image: url(../img/circle-wrong.svg); */
    background-image: url(../img/circle-warning.svg);
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
    /* background-origin: content-box; */
    background-color:#FAFAFA !important;
    border-color: red;
  }
  .info {
    color: #333
  }
  .info img {
    float: left;
    margin: 4px 10px 0 0;
  }

  label.error
  {
      color:#b52a2a !important;
      font-size:16px;
      font-weight:bold;
  }
  
  fieldset {
    padding: 5px;
    border: 1px solid #bbb;
    border-radius:5px;
    margin-top:5px;
    margin-bottom:10px;
  }
  
  fieldset > legend {
    color:#888;
    padding: 0px 7px 0px 7px;
    text-align:left;
  }

.inputInfoContainer {
    position: relative;
}

.inputInfoContainer i {
    position: absolute;
    right: 5px;
    top: 50%;
    color: #a9a9a9;
    font-size: 18px;
    transform: translate(-50%,-50%);
    cursor: pointer;
    width: 18px;
}

/* Checkbox */
input[type="checkbox"] + label:before {
	content: '\00a0';
	display: inline-block;
	width: 16px;
	height: 16px;
	font-size: 12px;
	line-height: 16px;
	margin-right: -10px;
	background-color: white;
	border: 1px solid #cbcac6;
	color: #000;
	text-align: center;
	cursor: pointer;
	position: relative;
	top: -1px;
	left: -20px;
	transition: all .3s;
	outline: 1px solid transparent;
}

input[type="checkbox"]:checked + label:before {
	content: '\f00c';
	font-family: 'FontAwesome', 'Arial Unicode MS';
	background-color: #8ec341;
	border: 1px solid #8ec341;
	color: #fff;
}

input[type="checkbox"] + label:hover:before {
	outline: 1px solid #8ec341;
}

input[type="checkbox"] + label {
  cursor: pointer;
  display:inline-block;
}

input[type="checkbox"]:disabled + label {
	color: #aaa;
	cursor: default;
}

input[type="checkbox"]:disabled + label:before {
	background-color: #f8f8f8;
	border: 1px solid #ececec;
	color: #dadada;
	cursor: default;
	outline: 1px solid transparent;
}
input[type="checkbox"]:disabled:checked + label:before {
	background-color: #f8f8f8;
	border: 1px solid #ececec;
	color: #dadada;
	cursor: default;
	outline: 1px solid transparent;
}

input[type="checkbox"]:checked + label.tooltip:before {
	background-color: #7ccc7b !important;
	border: 1px solid #7ccc7b;
}

label.error
{
	display:none !important;
}
  
  /* ------------------------------------------------ */

.buttons-bar {
  float: right;
  text-align: right;
}
.buttons-bar button{
  width:250px;margin-bottom:10px;
}

  button, .btn
  {
      position:relative;
      overflow:hidden;
      border: none;
      text-shadow: 0 0 1px rgba(255,255,255,0.3);
      font-size: 16px; 
      font-family: 'myriad';
      text-decoration: none;
      padding: 10px 25px;
  
      -moz-border-radius: 6px; 
      border-radius: 6px;

      color: #FFF;
      background-color:#585858;
      cursor:pointer;
  
      transition: all .2s;
  }
  
  button:hover, .btn:hover
  {
      background-color: #424242;
  }
  
  button:disabled, .btn:disabled
  {
      background-color:#d3d3d3 !important;
      cursor:default;
      border: 1px solid #ccc !important;
  }

  button.submiting, .btn.submiting
  {
    pointer-events: none;
  }
  
  button.submiting:before, .btn.submiting:before
  {
    content:"";
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    background-color:rgba(0,0,0,.15);
    
  }
  button.submiting:after, .btn.submiting:after
  {
    content:"";
    position:absolute;
    top:5px;
    left:50%;
    margin-left:-13px;

    width: 26px;
    height: 26px;
    border-top-color: #FFF;
    border-left-color: #FFF;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-style: solid;
    border-width: 2px;
    border-radius: 50%;  
    box-sizing: border-box;
    display: inline-block;

    -webkit-animation:spin 650ms linear infinite;
    -moz-animation:spin 650ms linear infinite;
    animation:spin 650ms linear infinite;
  }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  
  
  button.blue, .btn.blue{ color: #FFF; background-color: #427fed; border:1px solid #427fed; }
  button.blue:hover, .btn.blue:hover { background-color: #2539d1; }

  button.purple, .btn.purple{ color: #FFF; background-color: #652d90; border:1px solid #652d90; }
  button.purple:hover, .btn.purple:hover { background-color: #4e1d74; }
  
  button.red, .btn.red{ color: #FFF; background-color: #c65d5d; border:1px solid #c65d5d; }
  button.red:hover, .btn.red:hover { background-color: #b12a2a; }

  button.green, .btn.green{ color: #FFF; background-color: #8bc541; border:1px solid #8bc541; }
  button.green:hover, .btn.green:hover { background-color: #699b28; }
  
  button.clear, .btn.clear{ color: #802cc0; background-color: #FFF; border:1px solid #b191ca; }
  button.clear:hover, .btn.clear:hover { color: #000; background-color:#eee; }

#submitOnlineBtn{}
#submitQRBtn{
  background-image: url(../img/ips_logo2.png);
  background-repeat: no-repeat;
  background-position: 15px 5px;
}
#submitBtn{}

  /*---------------------------------------------------------------------
  -- modal
 */
 .modalOverlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .85);
    z-index: 1000;
  }
  
  .modalDialog {
    position: fixed;
  
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -49.5%);
    transform: translate(-50%, -49.5%);
  
    min-width: 400px;
    min-height:50px;
    max-height:95%;
    background-color: #FFF;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, .25);
    border: 1px solid #652d90;
    border-radius:6px;
    overflow:auto;
  
    z-index: 1001;
  }
  
  .modalDialogLoader {
    display: none;
  
    position: fixed;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .85);
    z-index: 10;
  }
  
  .modalHeader {
    position: relative;
  
    padding: 12px 50px 12px 15px;
    font-size: 20px;
    color:#FFF;
    background-color:#652d90;
  }
  
  .modalClose {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 32px;
    color: #FFF;
    font-weight: lighter;
  
    line-height: 28px;
  
    padding: 0 5px;
    border-radius: 2px;
    background-color: transparent;
  
    transition: all .3s;
  }
  
  .modalClose:hover {
    color: #652d90;
    background-color: #FFF;
  }
  
  /*---------------------------------------------------------------------
    -- Confirm
   */
   .confirmOverlay {
    display: none;
  
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .5);
    z-index: 1100;
  }
  
  .confirmDialog {
    position: fixed;
  
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -49.5%);
    transform: translate(-50%, -49.5%);
    border: 1px solid #c5c5d2;
  
    min-width: 400px;
    max-width: 500px;
    background-color: #FFF;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, .25);
    z-index: 1001;
  }
  
  .confirmHeader {
    padding: 10px 15px;
    font-size: 16px;
    color:#000;
    border-bottom:1px solid #e7e7e7;
  }
  
  .confirmText {
    text-align: center;
    padding: 25px;
  }
  
  .confirmFooter {
    text-align: right;
    padding: 10px;
  }

/* ---------------------------------------------------------------------
-- Dividers
*/

.dividerRight
{
  border-right: 1px solid #ffffff;
}

  /* ---------------------------------------------------------------------
  -- NEWS TEMPLATE DEFINITION 
  */

  .newsTitle
{
  color:#652d90;
    font-family: 'myriadUltraLight',arial, tahoma, sans-serif;
    font-size: 36px;
    letter-spacing: 1px;
    font-weight: 900;
    margin: 0 0 20px 0;
    cursor:pointer;
}
.newsBody
{
    font-family: 'myriad',arial, tahoma, sans-serif;
    font-size: 18px; 
    font-weight: 500;
    line-height: 24px;
}
.newsDate
{
    font-family: 'myriad',arial, tahoma, sans-serif;
    font-size: 18px; 
    font-weight: 900;
    line-height: 24px;
    margin: 10px 0 15px 0;
}
hr.news
{
    margin: 15px 0 15px 0; 
    border: 0; 
    height: 1px; 
    background-image: linear-gradient(to right, rgba(220, 200, 240, 1), rgba(130, 45, 190, 0.9), rgba(220, 200, 240, 1));
}


  /* ---------------------------------------------------------------------
  -- Tabs component
  */

.tabs > ul
{
    display:block;
    position:relative;
    padding:0;
    margin:0;
    list-style: none outside none;

    /* custom css */
    border-bottom:1px solid #652d90;
    text-align:center;
    height:39px;
}

.tabs > ul li
{
    display:inline-block;

    /* custom css */
    padding:10px 24px;
    margin-bottom: -1px;
    margin-right:5px;
    border-radius:7px 7px 0 0;
    border: 1px solid #652d90;
    border-bottom:none;
    background-color:#652d90;
    color:#FFF;
    font-size:16px;
    cursor:pointer;

    transition: all .3s;
}

.tabs > ul li.active
{
    background-color:#FFF;
    color:#652d90;
    border-bottom: 1px solid #FFF;
}

.tabs > div
{
    padding:10px;
    transition: all .3s;
}

.tabs > div > div
{
    display:none;
    position:relative;
}

.tabs > div > div.active
{
    display:block;
}

.tabs .purchase-status a{
  border: 1px solid #ccc;
  background-color: #fafafa;
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 20px;
  text-transform: capitalize;
  padding: 5px 10px;
  width: 150px;
  display: block;  
}
.tabs .purchase-status a[data-status="1"]{
  background-image: url(../img/circle-checked.svg);
}
.tabs .purchase-status a[data-status="2"]{
  background-image: url(../img/circle-working.svg);
}
.tabs .purchase-status a[data-status="3"]{
  background-image: url(../img/circle-working.svg);
}
.tabs .purchase-status a[data-status="4"]{
  background-image: url(../img/circle-wrong.svg);
}

green {color:#79b632;}
purple {color:#611e7a;}