@import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300');

@font-face {
    font-family: coke-font;
    src:url("{{url_for('static', filename='fonts/You2.ttf')}}");
}

@font-face {
    font-family: lcd-font;
    src:url("/static/fonts/LCDMono2.ttf");
}

@font-face {
    font-family: digital-font;
    src:url("/static/fonts/digital7.ttf");
}

body, h1, h2, h3, h4, h5, h6, li, span, button, div, p, input {
    /*
font-family: 'Noto+Sans+Display',sans-serif !important;
    font-family:'Titillium Web', sans-serif !important;
    font-family:'Istok+Web',sans-serif !important;
    */
    font-family:'Titillium Web', sans-serif !important;
}

body {
    border: none !important;
    text-shadow: 0 0 0 !important;
}


/*
edit: logo
*/
.ts-logo-img{
  width:80%;
  opacity:1.0;
  display:block;
  margin:0 10% 10px 10%;
}

.ts-judopay-img{
    width:50%;
    opacity:1.0;
    display:block;
    margin:0 auto;
  }



/*----------------------------------+
+  ts                               +
-----------------------------------*/
.info-error {

}

.im-width-50 {
    max-width:50%;
}

.ts-input
{

  font-size:1.5em !important;
  text-align:center !important;
  text-transform:uppercase !important;
  border-radius:0;
}

.ts-lowercase {
    text-transform: lowercase !important;
}

.ts-uppercase {
    text-transform: uppercase !important;
}

.ts-capitalize {
    text-transform: capitalize !important;
}

.ts-menu-item {
    /*font-family: 'Open Sans PRO',sans-serif !important;*/
    font-weight: 700 !important;
    padding: 16px !important;
}



.ts-invisible{
    display:none;
}

.ts-topmost {
    z-index:100000 !important;
}

.ts-topmost-1 {
    z-index:99999 !important;
}

.ts-topmost-2 {
    z-index:99998 !important;
}


.ts-margin-0-auto
{
    margin: 0 auto !important;
}


.ts-margin-4px
{
    margin: 4px !important;
}

.ts-margin-8px
{
    margin: 8px !important;
}

.ts-margin-bottom-8px
{
    margin-bottom: 8px !important;
}

.ts-margin-top-8px
{
    margin-top: 8px !important;
}

.ts-margin-bottom-16px
{
    margin-bottom: 16px !important;
}

.ts-margin-top-16px
{
    margin-top: 16px !important;
}

.ts-margin-16px
{
    margin: 16px !important;
}

.ts-padding-16px
{
    padding: 16px !important;
}

.ts-display-tablecell
{
    display: table-cell !important;
}

.ts-cellphone-prefix{
  width:30%;
  margin-right:4px;
}
.ts-cellphone{
  width:70%;
  margin-right:4px;
}

.ts-contact-info{
    color:black !important;

    text-decoration: underline !important;
    text-transform: lowercase !important;
    font-weight: normal !important;
}

.color-black{
    color:black !important;
}

.color-white{
    color:white !important;
}



/*----------------------------------+
+  select product                   +
-----------------------------------*/
.select-product-title
{

    text-shadow:none;
    font-size: 10vw;
    margin-bottom:10px;
}

.select-product-text{

    text-shadow:none;
    font-size: 7.0vw;
    margin-bottom:10px;
}

.select-product-88{
    font-family:'digital-font', sans-serif  !important;
    text-shadow:none;
    font-size: 5.0em !important;
    margin-bottom:10px;
    color:seagreen;
}

.select-product{

    text-shadow:none;
    font-size: 10vw !important;
    margin-bottom:10px;
    color:seagreen;
}

/*----------------------------------+
+  flex                             +
-----------------------------------*/

.ts-flex-column {
    display: flex;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    justify-content: center;
}
.ts-flex-row {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: center;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    justify-content: center;
}

.ts-flex-row2 {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    -webkit-align-items: center;
    justify-content: flex-start;
    column-gap: 2em;

}


/*----------------------------------+
+  vending                          +
-----------------------------------*/


.ts-vending-receipt-merchant-logo{

    max-width:40%;
    margin:20px auto;
}

.ts-vending-receipt-paymentmethod-logo{

    /*width: 64px;
    max-width:64px;
    margin:20px auto;
    */
    width:128px;
    margin:4px;
    display:block;
}

.ts-vending-receipt-orderid{
    font-size: 0.8em;
}

.ts-vending-paidwith {
    margin:16px;
}

.ts-vending-receipt-transactionid{

    font-size: 0.8em;
}

.ts-vending-receipt-text{

}

.ts-vending-receipt-short{

    display:block;
    background-color:white;
    color:black;
    padding:5px;
    border: dashed 1px black;
    margin: 5% auto;
    width: 90%;
    border-radius: 7px;
    text-align: center;
    text-decoration: underline;
}

.ts-vending-status {
    margin: 0 auto;
    padding: 4px;
    font-weight: bold;
    text-align: center;
    color: purple;
}

.ts-vending-header {
    margin: 0 auto;
    padding: 4px;
    text-align: center;
}

/*
https://codingislove.com/css-speech-bubbles/
*/

.ts-validation-box-simple {
    display:block;
    margin: 20px auto;
    border: 4px solid white;
    padding: 4px;
    text-align: center;
    font-weight: 900;
    color: white;


    background-color:crimson;

  }


.ts-validation-box-100 {
    width: 100px;
    margin: 50px auto;
    border: 4px solid crimson;
    padding: 20px;
    text-align: center;
    font-weight: 900;
    color: crimson;

    position: absolute;
    background-color:white;
    top:100px;
    left:0;
    right:0;

    z-index: 10000;
  }


  .ts-vertical-horizontal-center-80 {
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    -ms-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    min-width:80% !important;
    width:80% !important;
    max-width:80% !important;
  }
  .ts-margin-width-80
{
    width:80% !important;
    margin-left:10% !important;
    margin-right:10% !important;
}




.ts-circle-text {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 20px;
    color: black;
    text-align: center;
    background: white;

}

.margin-right-20px{
    margin-right: 20px !important;
}

.margin-right-auto{
    margin-right: auto !important;
}

.text-align-center {
    text-align: center !important;
}

.font-bold {
    font-weight: bold !important;
}

.judopay-errors{
    color: crimson;
    padding:4px;
    margin:4px;
}

/*
custom icons
*/


.ts-judo-form {
    border:2px solid #a99ceb;
    padding:10px;
    width:90%;
    margin: 10px auto;
}

.center-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}


.ts-vertical-align-middle
{
    vertical-align: middle !important;
}

.ts-32px
{
    width: 50px !important;
}

.ts-margin-top-10px {
    margin-top: 10px !important; /* change this to whatever height you want it */
}

.ts-margin-bottom-10px {
    margin-bottom: 10px !important; /* change this to whatever height you want it */
}

.ts-margin-left-4px {
    margin-left: 4px !important; /* change this to whatever height you want it */
}

.ts-margin-left-right-8px {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.ts-margin-right-8px {
    margin-right: 8px !important;
}


.ts-nav-bar {

    height:55px !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
    color:white !important;

}


.ts-img-center-90{
    width:80%;
    opacity:1.0;
    display:block;
    margin:5% 10px 5%;
}

.ts-img-center-80{
    width:80%;
    opacity:1.0;
    display:block;
    margin:0 10% 10px 10%;
}

.ts-img-center-50{
    width:50%;
    opacity:1.0;
    display:block;
    margin:0 25% 10px 25%;
}

.ts-align-center {
    text-align:center !important;
}

.ts-align-left {
    text-align:left !important;
}

.ts-align-right {
    text-align:right !important;
}

.ts-accordion {
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
}



/*
+-----------------------------------+
+    deprecated                     +
+-----------------------------------+
*/