@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
b,
u,
label,
input,
select,
option,
textarea,
span,
.valid-feedback, .invalid-feedback, label span, .modal-body, li {
    font-family: 'Varela Round', sans-serif;
}
ol, ul {
    padding-left: 1rem;
}
ol > li{
    padding-top: 1rem;
	
}
li span.orderP, .modal-header h5 {
	font-weight: bold;
	text-decoration: underline;
}
.modal-content, .modal-dialog, .modal-body {
	border-radius: 20px !important;
}
label span {
	cursor: pointer;
	text-decoration: underline;
}
label a {
	text-decoration: underline;
}
form {
    direction: rtl;
}

.valid-feedback, .invalid-feedback {
    font-size: 18px;
    font-weight: 600;    
    margin-bottom: 10px;
}

.submitButton {
    background-color: transparent !important;
    border: 5px solid white !important;
    border-radius: 15px !important;
    color: white !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    font-family: 'Varela Round';
    margin-top: 20px;
}
.submitButtonNew {
    margin: 0;
	padding: 0;
	background-color: transparent;
	border: 0;
}
.submitButtonNew img {
	width: 350px;
}
.storebutton {
    background-color: transparent !important;
    border: 5px solid white !important;
    border-radius: 15px !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    font-family: 'Varela Round';
    margin-top: 20px;
    padding:10px 20px;
}
.cc-selector {
    margin-top: 20px;
}

.drinkcard-cc {
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100px;
    height: 99px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(.5) opacity(.8);
    -moz-filter: brightness(1.8) grayscale(.5) opacity(.8);
    filter: brightness(1.8) grayscale(.5) opacity(.8);
}

.drinkcard-cc:hover {
    -webkit-filter: brightness(1.2) grayscale(.2) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.2) opacity(.9);
    filter: brightness(1.2) grayscale(.2) opacity(.9);
}

.mail {
    background-image: url("../imgs/desk/mail.png");
}

.sms {
    background-image: url("../imgs/desk/sms.png");
}

.cc-selector input {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.cc-selector-2 input:active+.drinkcard-cc,
.cc-selector input:active+.drinkcard-cc {
    opacity: .9;
}

.cc-selector-2 input:checked+.drinkcard-cc,
.cc-selector input:checked+.drinkcard-cc {
    -webkit-filter: none;
    -moz-filter: none;
    filter:none;
    border-color: yellow;
    box-shadow: 0 0 10px yellow;
    border-radius: 8px;
}

/* Extras */
a:visited {
    color: #888
}

a {
    color: #444;
    text-decoration: none;
}

p {
    margin-bottom: .3em;
}

* {
    font-family: monospace;
}

.cc-selector-2 input {
    margin: 5px 0 0 12px;
}

.cc-selector-2 label {
    margin-left: 7px;
}

span.cc {
    color: #6d84b4
}

@media (min-width:800px) {
    body {

        background-image: url("../imgs/desk/bg.jpg");
        background-size: cover;
        background-repeat: none;
        overflow-x: hidden !important;
        padding-top: 200px;
    }

    .wanttojoin {
        margin-top: 20px;
        width: 560px;
    }

    .bear {
        margin-top: 20px;
        width: 420px;
    }

    .wanttoget {
        margin-top: 20px;
        width: 500px;
    }

    .logo {
        width: 450px;
    }

    .percentarea {
        margin: 0 auto;
        background-color: #161d39;
        width:740px;
        text-align: center;
        direction: rtl;
    }

    .bottomwhitelinks, 
    .bottomwhitelinks a {
        color:white !important;
        font-size: 20px;
        font-weight: 800;
    }

    .percentarea p{
        color:white;
        font-weight: 600;
        font-size:30px;
    }
    .subheader {
        font-weight: bold;
        font-size: 22px;
        margin-top: 15px;
    }
    .subheaderbear {
        font-weight: bold;
        font-size: 28px;
        margin-top: 15px;
        color:#650e13;
    }
    
    form input,
    form select,
    form textarea {
        border-radius: 25px !important;

        color: black !important;
        text-align: center;

        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: 20px !important;
        font-weight: bold !important;
        font-family: 'Varela Round';
    }
	.select2-container--default .select2-selection--single {
		border-radius: 25px;
	}
	.select2-container .select2-selection--single {
		height: auto;
	}
	.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
		padding: 8px 2.25rem 8px 0.75rem;
		font-size: 20px;
		font-weight: bold !important;
		font-family: 'Varela Round';
	}
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: unset;
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 48px;
	}
	.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
		right: 1px;
		left: auto;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: right 0.75rem center;
		background-size: 16px 12px;
		width: 3.75em;	
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow b {display: none;}
	.select2-dropdown {
		border-radius: 0 0 25px 25px;
		padding-bottom: 25px;
	}
	
    form .fieldHolder {
        padding-left: 10px !important;
        padding-right: 10px !important;
        float: right;
    }

    form {
        margin-bottom: 100px;
    }

    .form-check-input {
        float: none !important;
    }

    .form-check-label {
        margin-right: 35px;
        font-size: 20px !important;
        font-weight: bold !important;
        font-family: 'Varela Round';
    }

    .donat {
        position: absolute;
        left:-130px;
        top:200px;
        max-width: 260px;
    }

    .lolipop {
        position: absolute;
        left:-65px;
        top:600px;
        max-width: 260px;
    }

    .candy {
        position: absolute;
        right:-60px;
        top:230px;
        max-width: 260px;
    }

    .cookie {
        position: absolute;
        right:-100px;
        top:600px;
        max-width: 260px;
    }

  

    .socialicons {
        float:center;
        max-width:40px;
       
        margin-top:7px;
    }

    .socialicons:not(:last-child) {
        margin-right:8px;
    }
}


@media (max-width:799px) {
    body {
        background-image: url("../imgs/mob/bg.jpg");
        background-size: auto;
        background-repeat: none;
        background-position: 50% 20%;
        padding-top: 130px;
        overflow-x: none;
    }

    .wanttojoin {
        margin-top: 20px;
        max-width: 96%;
    }

    .wanttoget {

        margin-top: 20px;
        max-width: 96%;
    }

    .logo {
        max-width: 70%;
    }

    .bear {
        margin-top: 20px;
        width: 320px;
    }

    .bears {
        max-width: 80px;
        margin-top:40px;
    }

    .subheaderbear {
        font-weight: bold;
        font-size: 20px;
        margin-top: 15px;
        color:#650e13;
    }

    .subheader {
        font-weight: bold;
        font-size: 18px;
        margin-top: 15px;
    }

    .percentarea {
        margin: 0 auto;
        background-color: #161d39;
        width:100%;
        text-align: center;
        direction: rtl;
    }

    .storebutton {        
        font-size: 18px !important;
        font-weight: 900 !important;
        font-family: 'Varela Round';
        margin-top: 20px;
        padding:8px 12px;
    }

    .bottomwhitelinks, 
    .bottomwhitelinks a {
        color:white !important;
        font-size: 20px;
        font-weight: 800;
    }

    .percentarea p{
        color:white;
        font-weight: 600;
        font-size:20px;
    }

    form input,
    form select,
    form textarea {
        border-radius: 25px !important;

        color: black !important;
        text-align: center;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        font-family: 'Varela Round';
    }
		.select2-container--default .select2-selection--single {
		border-radius: 25px;
	}
	.select2-container .select2-selection--single {
		height: auto;
	}
	.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
		padding-top: 5px;
		padding-bottom: 5px;
		font-size: 16px;
		font-weight: bold !important;
		font-family: 'Varela Round';
	}
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: unset;
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 36px;
	}
	.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
		right: 1px;
		left: auto;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: right 0.75rem center;
		background-size: 16px 12px;
		width: 3.75em;	
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow b {display: none;}
	.select2-dropdown {
		border-radius: 0 0 25px 25px;
		padding-bottom: 25px;
	}
    form .fieldHolder {
        padding-top: 10px !important;
        padding-bottom: 10px !important;

    }

    .form-check-input {
        float: none !important;
    }

    .form-check-label {
        margin-right: 35px;
        font-size: 20px !important;
        font-weight: bold !important;
        font-family: 'Varela Round';
    }

    .form-check-input {
        width: 2em;
        height: 2em;
    }


    .donat {
        position: absolute;
        left:0px;
        top:120px;
        max-width: 120px;
		z-index: -1;
    }

    .lolipop {
        position: absolute;
        left: 0;
        top:520px;
        max-width: 130px;
        z-index: -1;
    }

    .candy {
        position: absolute;
        right:0px;
        top:16px;
        max-width: 140px;
        z-index: -1;
    }

    .cookie {
        position: absolute;
        right:0;
        top:780px;
        max-width: 120px;
        z-index: -1;
    }

    .socialicons {
        float:center;
        max-width:30px;
       
        margin-top:7px;
    }

    .socialicons:not(:last-child) {
        margin-right:8px;
    }
}
@media (min-width: 576px) {
	.modal-dialog {
    	max-width: 560px;
		
	}
	.modal-body {
		max-height: 500px;
		overflow-y: scroll;
		direction: ltr;
		padding: 2rem;
	}
	.modal-content {		
    	padding-bottom: 20px;
	}
	.modal-header {
		flex-direction: row-reverse;
		padding: 1rem 2rem;
		border: none;
	}
	/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #03c2ef #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #03c2ef;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }
	
}
.text-muted a {
	--bs-text-opacity: 1;
    color: #6c757d!important;
	font-size: 13px;
	font-family: monospace;
}