:root{
    --color1: #25CCDB;
    --color2: #FF7A00;
    --color3: #E64479;
    --color4: #812CC9;
    --color5: #026CFE;
    
}
/* -------------------------------------------------
    HEADER 
-------------------------------------------------- */
.header-top-bar a.btn{
    border-radius: 0;
}
.header-with-topbar .navbar{
    border-bottom: 1px solid var(--bs-gray-200);
}
header .navbar-brand img{
    height: 30px;
}
.swiper-slide h5{
    text-align: center;
    text-transform: uppercase;
}
/* -------------------------------------------------
   COLORS, MARGINS, SIZES 
-------------------------------------------------- */
.color1{
    color: var(--color1);
}
.color2{
    color: var(--color2);
}
.color3{
    color: var(--color3);
}
.color4{
    color: var(--color4);
}
.color5{
    color: var(--color5);
}
.top-120px {
    top: 120px;
}
.display-5{
    text-transform: uppercase;
}
.icon35{
    width: 35px;
    height: auto;
    margin-right: 12px;
}
html {
  scroll-padding-top: 60px; 
}
/* -------------------------------------------------
    BACKGROUNDS
-------------------------------------------------- */
.bg_world{
  background-image: url('../img/element_3.webp');
  background-attachment: fixed;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top center;
}

/* -------------------------------------------------
    SECTIONS 
-------------------------------------------------- */
/* Check our rates*/
section#rates #howToCall span.bi{
	letter-spacing: -3px;
	font-size: 1.75rem;
}
section#rates #howToCall span.space {
    letter-spacing: 2px !important;
}

#ratesTable tbody{
	background-color: #f1f1f1;
	position: relative;
}
#tr-rates{
	background-color: #E5E5E5;
	color: #111;
}

table#ratesTable #tr-rates th:first-child{
	border-top-left-radius: 15px;
}

table#ratesTable #tr-rates th:last-child{
	border-top-right-radius: 15px;
}

#tr-rates th:nth-child(n + 3){
	background-color: var(--bs-yellow);
	color: #111;
}

table#ratesTable tbody tr td{
	padding-left: 15px;
	
}

#ratesTable ul li.bi::before{
	margin-right: 10px;
}

td.destination {
    padding-right: 20px;
}

#ratesTable tbody tr.btnClose::after{
	content: "\F62A";
	font-family: "bootstrap-icons";
	display: inline-block;
	font-size: 26px;
	position: absolute;
	right: 10px;
}

#ratesTable td.destination.fixed::after{
	content: "\F5C1";
}

#ratesTable td.destination.mobile::after{
	content: "\F4E7";
}

#ratesTable td.destination.fixed::after,
#ratesTable td.destination.mobile::after{
	font-family: "bootstrap-icons";
	display: inline-block;
	font-size: 20px;
    line-height: 20px;
	vertical-align: -0.2em;
	color: var(--color5);
	float: right;
}


.currency.after,
.rus .currency.before {display: none;}
.rus .currency.after {display: inline;}

span.footNoteRate.bi.bi-telephone::before,
span.footNoteRate.bi.bi-phone::before{
	color: var(--color5);
}

/* Tutorial */
section#tutorial .tab-content {
	border: 1px solid var(--color5);
	border-top-right-radius: 25px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
}
section#tutorial .nav-tabs{
	border-bottom: none;
}
section#tutorial .nav-tabs .nav-link.active{
	border-bottom-color: #fff;
    background-color: #fff;
    color: var(--color3);
}
section#tutorial .nav-tabs .nav-link{
	border-color: var(--color5);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
    padding: 10px 30px;
	color: var(--bs-gray-700);
	background: var(--bs-gray-100);
}
@media (min-width: 1399.98px){
    .link_step{
        position: absolute;
        bottom: 0;
		margin-top: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) { 
    #TutorialTabContent .tab-pane .d-grid{
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 3rem;
    }
	 .link_step{
        text-align: center;
    }
}
#tutorial-page .btn.btn-light.active{
	background-color: var(--color5);
	color: #fff;
}
.list_steps{
    position: relative;
    padding: 40px 0;
    border-bottom: 1px solid var(--color1);
}
.list_steps:first-of-type{
    border-top: 1px solid var(--color1);
}

#info button.btn_modal{
	color: #fff;
	background-color: rgba(0, 128, 230, 0.6);
	border-radius: 7px;
}

#info button.btn_modal:hover{
	color: #fff;
	background-color: rgba(0, 128, 230);
	border-radius: 7px;
}

/*  Message board */
#message_board #msgFeed  {
    height: 420px;
    overflow-y: scroll;
}
#message_board #msgFeed .msg-entry {
	cursor: pointer;
	padding: 12px 6px 12px 26px;
	border-bottom: 1px solid var(--bs-gray-200);
}
#message_board #msgFeed .msg-entry .date-and-label {
	position: relative;
	display: flex;
	align-items: center;
}
#message_board .pinned .msg-entry i.bi {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 0;
}
#message_board .msg-entry.orange i.bi,
#message_board .orange .title-row.pin::before {
	color: var(--bs-orange);
}
#message_board .msg-entry.blue i.bi, 
#message_board .blue .title-row.pin::before {
	color: var(--bs-cyan);
}
#message_board .msg-entry.green i.bi,
#message_board .green .title-row.pin::before {
	color: var(--bs-green);
}
#message_board .msg-entry.purple i.bi,
#message_board .purple .title-row.pin::before {
	color: var(--bs-purple);
}
#message_board .msg-entry.gray i.bi,
#message_board .msg-entry.grey i.bi,
#message_board .gray .title-row.pin::before,
#message_board .grey .title-row.pin::before {
	color: var(--bs-secondary);
}
#message_board .msg-entry .msg-content * {
	background-color: inherit !important;
}
#message_board .msg-entry.visible.orange {
	background-color: rgba(var(--bs-warning-rgb), 0.1);
}
#message_board .msg-entry.visible.blue {
	background-color: rgba(var(--bs-info-rgb), 0.1) ;
}
#message_board .msg-entry.visible.green {
	background-color: rgba(var(--bs-success-rgb), 0.1);
}
#message_board .msg-entry.visible.purple {
	background-color: #e2d9f3;
}
#message_board .msg-entry.visible.gray,
#message_board .msg-entry.visible.grey {
	background-color: var(--bs-gray-100);
}
#message_board .title-row.pin::before {
	content: "\F586";
	font-family: "bootstrap-icons";
	position: absolute;
	top: 10px;
	display: block;
	font-size: 18px;
	line-height: 20px;
}
#message_board .visible .msg-title {
	display: block;
}
#message_board .msg-entry .date-and-label .msg-label {
	height: 28px;
	width: 126px;
	text-align: center;
	line-height: 1em;
	border-radius: 5px;
	align-content: center;
	margin-left: 12px;
}
#message_board .msg-entry .msg-label.orange {
	background-color: var(--bs-orange);
	color: var(--bs-dark);
}
#message_board .msg-entry .msg-label.green {
	background-color: var(--bs-green);
	color: var(--bs-light);
}
#message_board .msg-entry .msg-label.purple {
	background-color: var(--bs-purple);
	color: var(--bs-light);
}
#message_board .msg-entry .msg-label.gray,
#message_board .msg-entry .msg-label.grey {
	background-color: var(--bs-secondary);
	color: var(--bs-light);
}
#message_board .msg-entry .msg-label.blue {
	background-color: var(--bs-cyan);
	color: var(--bs-dark);
}

#message_board .msg-content,
#message_board .msg-content > br:first-child,
#message_board .msg-content > br:last-child {
	display: none;
}
#message_board .msg-content p:last-of-type {
	margin-bottom: 0;
}



/* -------------------------------------------------
    RESPONSIVE
-------------------------------------------------- */
@media screen and (max-width: 767.98px) {
    .header-top-bar p{
        padding: 10px 0;
    }
	.list_steps{
		row-gap: 1.2rem;
	}
	
}