/*------ HTML defaults ------*/
* {
    box-sizing: border-box;
}

a, span {
	display: inline-block;
	vertical-align: middle;
}

img {
	display: inline-block;
	vertical-align: middle;
	border: none;
	margin: 0;
	padding: 0;
    max-width: 100%;
}





/*------ Basic Classes ------*/
.nl {
	clear: both;
	line-height: 0;
	font-size: 0;
	height: 0;
}

.hidden {	display: none;	}
.no-border {    border: none;	}

.f {			float: left;	}
.f-rev {		float: right;	}

.ta {			text-align: left;	}
.ta-rev {		text-align: right;	}
.ta-center {	text-align: center !important;	}
.ta-left {		text-align: left !important;	}
.ta-right {		text-align: right !important;	}

.mt1 {	margin-top: 10px;	}
.mt2 {	margin-top: 25px;	}
.mt3 {	margin-top: 50px;	}

.mb1 {	margin-bottom: 10px;	}
.mb2 {	margin-bottom: 25px;	}
.mb3 {	margin-bottom: 50px;	}

.ml1 {	margin-left: 10px;	}
.ml2 {	margin-left: 25px;	}
.ml3 {	margin-left: 50px;	}

.pad1 {	padding: 0px 2px; }
.pad2 {	padding: 2px 7px; }
.pad3 {	padding: 10px; }

.no-pad {		padding: 0px;		}
.no-margin {	margin: 0px;		}
.no-minw {		min-width: auto !important;	}





/*------ colors ------*/

.fc-blue {			color: #0099FF; 	}
.fc-green {			color: #00C291; 	}
.fc-yellow {		color: #FFDD57; 	}
.fc-red {			color: #F54352; 	}
.fc-black {			color: #000000; 	}
.fc-white {			color: #FFFFFF; 	}

.bg-white {			background-color: #FFFFFF !important; 	}
.bg-blue {			background-color: #96D1F3 !important; 	}
.bg-green {			background-color: #19D27B !important; 	}
.bg-darkgreen {		background-color: #25995d !important;	}
.bg-whitegreen {	background-color: #69E4A9 !important; 	}
.bg-whitered {		background-color: #FFD1D1 !important; 	}
.bg-red {			background-color: #F54352 !important; 	}
.bg-gray {			background-color: #444444 !important; 	}
.bg-whitegray {		background-color: #EEEEEE !important; 	}
.bg-yellow {    	background-color: #FFDD57 !important;  }
.bg-whiteyellow {	background-color: #FFF2BD !important;  }







/*------ .myform forms ------*/

.myform label {
	display: inline-block;
	height: 35px;
	line-height: 35px;
	min-width: 140px;
	padding: 0 5px;
	margin: 0;
	text-align: right;
	vertical-align: top;
}

.myform input[type="text"],
.myform input[type="file"],
.myform input[type="password"],
.myform input[type="number"],
.myform input[type="email"],
.myform input[type="tel"],
.myform input[type="url"],
.myform input[type="color"],
.myform input[type="date"],
.myform input[type="time"],
.myform input[type="month"],
.myform select,
.myform textarea {
	display: inline-block;
	font-family: inherit;
	font-size: inherit;
	border: none;
	outline: none;
	background-color: #EEEEEE;
	padding: 0 10px;
	width: 200px;
	height: 35px;
	margin-bottom: 5px;
	border-radius: 1px;
	vertical-align: top;
}

.myform select {
	width: 200px;
}

.myform textarea {
	height: 80px;
}

.myform input[type="text"].sidebutton,
.myform input[type="email"].sidebutton,
.myform input[type="password"].sidebutton,
.myform input[type="file"].sidebutton
{
	width: 163.5px;
}
.myform select.sidebutton {
	width: 183px;
}


.myform button:not(.iti__selected-country),
.myform input[type="button"],
.myform input[type="submit"] {
    display: inline-flex;
	font-family: inherit;
	font-size: inherit;
	background-color: #FFDD57;
	color: #000;
	border: none;
	cursor: pointer;
    padding: 2px 10px 0px 10px;
	min-width: 120px;
    min-height: 35px;
	margin-bottom: 5px;
	border-radius: 3px;
	vertical-align: top;
    align-items: center;     /* Vertical centering */
    justify-content: center; /* Horizontal centering */
}

.myform button:not(.iti__selected-country):hover {
    background-color: #0099FF;
    color: #FFF;
}

.myform input[type="checkbox"],
.myform input[type="radio"] {
	margin: 0;
	padding: 0;
}

.myform label input[type="checkbox"],
.myform label input[type="radio"] {
	vertical-align: middle;
	margin: auto;
	padding: 0;
	height: 40px;
}


.myform p {
	display: inline-block;
	margin: 0;
	padding: 0;
	vertical-align: top;
}

.myform label span {
	color: gray;
	padding: 0 5px;
	font-size: 0.9em;
}

.myform label.error {
	min-width: 0;
	padding: 0 5px;
}

.myform label.hint {
	text-align: left;
	min-width: 0;
}

.myform label.outer {
	text-align: left;
	padding: 0;
}


.warning, .error,
input[type="text"].error,
input[type="file"].error,
input[type="password"].error,
input[type="number"].error,
input[type="email"].error,
input[type="tel"].error,
input[type="url"].error,
input[type="color"].error,
input[type="date"].error,
input[type="time"].error,
input[type="month"].error,
select.error,
textarea.error,
.myform input[type="text"].error,
.myform input[type="file"].error,
.myform input[type="password"].error,
.myform input[type="number"].error,
.myform input[type="email"].error,
.myform input[type="tel"].error,
.myform input[type="url"].error,
.myform input[type="color"].error,
.myform input[type="date"].error,
.myform input[type="url"].error,
.myform input[type="time"].error,
.myform input[type="month"].error,
.myform select.error,
.myform textarea.error
{
	background-color: #FFD1D1;
}

.myform input:focus, .myform textarea:focus, .myform select:focus {
	box-shadow: 0 2px 0px rgb(0, 0, 0); /* bottom black line */
}






/*------ general menu behavior ------*/

.menu, .menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
	z-index: 1;
	white-space: nowrap;
}

.menu > li {
	float: left;
	position: relative;
}

.menu ul li {
	position: relative;
}

.menu li > ul, .menu li > div.drop, div.menu > .drop  {
	/* display: none; */
	position: absolute;
	top: 100%;
	opacity: 0;
	visibility: hidden;
}

.menu ul li ul {
	top: 0;
	left: 100%;
}

.menu li:hover > ul, .menu li:hover > div.drop, div.menu:hover > .drop {
	/* display: block; */
	opacity: 1;
	z-index: 1;
	visibility: visible;
}

.menu li > a {
	display: block;
}


.rtl .menu > li {
	float: right;
}

.rtl .menu ul li ul {
	left: auto;
	right: 100%;
}

.rtl .menu li > ul, .rtl .menu li > div.drop  {
	right: 0;
}









/*------ rtl ------*/
body.rtl .f {	float: right;	}
body.rtl .f-rev {	float: left;	}

body.rtl .ta {	text-align: right;	}
body.rtl .ta-rev {	text-align: left;	}

body.rtl .myform label {
	text-align: left;
}






/*------ Define the bounce animation ------*/
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Apply the animation to the input element */
.bounce {
    animation: bounce 1s;
}