/*
	Theme Name: Klick
	Theme URI:
	Author: Expertel
	Author URL:
	Description: Theme for klick
	Version: 1.0
	License: GNU General Public License V2 or later
	License: URI:
	Tags: Community Template
*/

:root {
  --mainBackgroud: #ffffff;
  --maxWidthContainer: 1440px;
  --heroNew: 'Open Sans', sans-serif;
  --mainColorText: #50556C;
}

body{
	background: var(--mainBackgroud);
	font-family:var(--heroNew);
	font-weight:normal;
	color: var(--mainColorText);
	/*
	background-image: url(images/oval-big.png);
	background-repeat: no-repeat;
	background-position:  right button;
	*/
}

button:focus,
a:active, 
a:focus {
	outline: 0;
	border: none;
	-moz-outline-style: none;
}

.noScrollbar{
    overflow-y: hidden;
}
.orangeBar{
	background: #de4d38;
	color: #fff;
}
.orangeBar{
	padding-top: 80px;
	padding-bottom: 80px;
}
.orangeBar h1{
	font-size: 54px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1px;
}
.display-none{
	display: none;
}
.orangeBar img{
	position:absolute; right:100px; top: 0px
}

.body-content{
	max-width: 1370px;
	margin: 0 auto;
}
.holder-login{
	padding-top: 50px;
	padding-bottom: 50px;
}
.holder-login .body-content,
.orangeBar .body-content{
	padding-left: 100px;
	padding-right: 100px;
	position: relative;
}

.holder-login .description{
	font-weight: 600;
}

.set-bg{
	background: linear-gradient(180deg, rgba(255, 80, 45, 0) 0%, rgba(255, 80, 45, 0.098) 48.44%, rgba(255, 80, 45, 0) 100%);
}

.set-color-main{
	background-color: #DE4D38;
	color: #fff;
}
.set-color-main:hover{
	color: #fff;
}

.select-containerPayment select:focus,
.select-container select:focus{
	outline: none;
}
.select-containerPayment select,
.select-container select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: .5em;
    border: none;
    border-radius: 3px;
    padding: 1em 2em 1em 1em;
    /*font-size: 20px;*/
}
.select-containerPayment,
.select-container {position:relative; display: inline;}

.select-containerPayment:after,
.select-container:after {content:""; width:0; height:0; position:absolute; pointer-events: none;}

.select-containerPayment{
	position: relative;
    display: block;
}
.select-containerPayment:after{
	border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 1.5em;
    right: .75em;
    border-top: 8px solid black;
    opacity: 0.5;
}
.select-container:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: .3em;
    right: .75em;
    border-top: 8px solid black;
    opacity: 0.5;
}

.select-container select::-ms-expand,
.select-container select::-ms-expand {
    display: none;
}

/*
.select-container select option {
  position: absolute;
  background-color: red;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 10px !important;
  margin: 10px;
}
*/
.ctrl_body #ctrl_content_left h1.text{
	font-size: 54px;
	font-weight: 700;
	line-height: 1.5;
    letter-spacing: 1px;

}

#holderLogout{
	text-align: right;
	padding-bottom: 15px;
	padding-right: 10px;
	padding-top: 10px;
}

#holderLogout a{
	color: #DE4D38;
}

#holderLogout a:hover{
	text-decoration: none;
}
#holderLogout img{
	max-width: 24px;
}

#mainContainerHeader{
	max-width: 1290px;
	margin: 0 auto;
	padding-top: 60px;
	padding-left: 10px;
	padding-right: 10px; 
}

#mainContainer{
	/*
	max-width: 1370px;
	margin: 0 auto;
	*/
	padding-top: 60px;
	padding-left: 0px;
	padding-right: 0px; 
	
	
}

#holderOrderFr{
	max-width: 1290px;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
}

#mainContainer #ctrl_header{
}	

#mainContainerHeader #ctrl_header .left{
	width: 47%;
	display: inline-block;
}

#mainContainerHeader #ctrl_header .right{
	width: 52%;
	display: inline-block;
	text-align: right;
	padding-bottom: 20px;

}

.ctrl_body{
	padding: 0px 5px 61px 125px;
}

.ctrl_body_order{
	padding: 0px 5px 61px 75px;

}

.grid-container-order{
	display: flex;
 	flex-wrap: wrap;
 	flex-direction: row;
}

.grid-container-order .sectionOne{
	order: 1;   
    
	flex-basis: 69%;
}
.grid-container-order .sectionOne .ppleft{
	padding-left: 0px;
}
.grid-container-order .sectionTwo{
	order: 2;
  	flex-basis: 31%;
   
}


.sectionOne .holderInfo{
	max-width: 700px;
	font-size: 20px;
	font-weight: 300;
	margin-bottom: 52px;
}

.sectionOne .holderInfo .secondInfo{
	padding-top: 33px;
	padding-bottom: 0px;
}

.sectionOne .holderInfo .infoUser{
	font-weight: bold;
}

.sectionOne  .infoFreeUser{
	padding-bottom: 35px;
}

.sectionOne  .infoFreeUser .infoFreeMainColor{
	font-weight: bold;
	font-size: 24px;
	color: #DE4D38;
}

.sectionOne  .infoFreeUser .infoFreeSecondColor{
	font-weight: bold;
}
.sectionOne .infoFreeUser{
	font-weight: 300;
	font-size: 24px;
}



#holderFreePhone{
	margin-bottom: 40px;
}

/*Orders*/
.cp_size_grid{
	display: flex;
  	flex-wrap: wrap;
  	flex-direction: row;
  	padding-top: 16px;
  	gap: 3%;
}

.cp_size_grid > div {
  flex-basis: 100%;
  margin-bottom: 10px; 

  
}

.cp_size_grid div select{
	width: 100%;
	
	border: solid 1px #ccc;
	border-radius: 6px;
	padding: 8px; 
}

.container_phone {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}
/*F4F4F4*/
/*
.container_phone .left {
  order: 1;
  
  flex-basis: 32.3%;
  margin:1% 1% 1% 0%;
}
*/

.container_phone .middle {
  order: 3;
 
  flex-basis: 29%;
  margin:2% 4% 2% 0%;
  padding: 24px 18px;
  text-align: center;
  
}

.container_phone .middle  .imageContainer{
	/*background: red;*/
	min-height: 220px;
}

.container_phone .middle .cp_model{
	font-size: 20px;
	color: #50556C;
	padding-top: 36px;
}

.container_phone .middle .cp_size{
	font-size: 16px;
	font-weight: 200;
	color: #50556C;
}

.container_phone .middle .cp_options{
	margin-top: 24px;
}
.container_phone .middle .cp_options button.btnSelectPhone{
	border: solid 1px #282D32;
	border-radius: 4px;
	width: 100%;
	padding: 14px;
	background: #fff;
	color: #282D32;
	font-size: 14px;
	margin-top: 12px;
	
}

.container_phone .middle .cp_options button.btnSelectPhone::after{
	content: 'Select';
}

.container_phone .middle .cp_options button.btnSelectedPhone{
	border: solid 1px #DE4D38;
	background: #DE4D38;
	color: #fff;
	font-weight: bold;
	content: 'Select';
}

.container_phone .middle .cp_options button.btnSelectedPhone::before{
	content: '';
}
.container_phone .middle .cp_options button.btnSelectedPhone::after{

	content: 'Selected';
}


.container_phone .middle img{
	max-width: 100%;
}


.container_phone .right {
  order: 2;
 
  flex-basis: 32.3%;
  margin:1% 1% 1% 0%;
}


.container_phone .middle{
	border: solid 1px #F4F4F4;
	border-radius: 5px;
	-webkit-box-shadow: 0px 1px 3px 0px rgba(204,204,204,1);
	-moz-box-shadow: 0px 1px 3px 0px rgba(204,204,204,1);
	box-shadow: 0px 1px 3px 0px rgba(204,204,204,1);
}

.container_phone .middle.holderSelectedPhone{
	border: solid 1px #DE4D38;
}


button.btnSelectOldDevice{
	border: solid 1px #DE4D38;
    border-radius: 4px;
    width: 100%;
    padding: 14px;
    background: #fff;
    color: #DE4D38;
    font-size: 14px;
    margin-top: 12px;
}
button.btnSelectedOldDevice {
    border: solid 1px #DE4D38;
    border-radius: 4px;
    width: 100%;
    padding: 14px;
    background: #fff;
    color: #DE4D38;
    font-size: 14px;
    margin-top: 12px;
    font-weight: 900;


	border: solid 1px #DE4D38;
    background: #DE4D38;
    color: #fff;
    font-weight: bold;
}



.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  align-items: center;
}


.grid-item .description{
	/*padding-top: 27px;*/
	padding-bottom: 27px;
	font-size: 20px;
	font-weight: 300;
}

#ctrl_content_left{
	padding-top: 10px;
}
#ctrl_content_right{
	text-align: center;
}

#mainContainer form#searchPhone{
	max-width: 320px;
}

#mainContainer form#formOrder{
	max-width: 100%;
}

#mainContainer form #holderByeEmail span{
	font-size: 13px;
}

#mainContainer form #access_country,
#mainContainer form #by_access_code,
#mainContainer form #zipCode,
#mainContainer form #phone_number,
#mainContainer form #confirmation_code{
	background: rgb(216 216 216 / 29%); /* #D8D8D8;*/
	padding: 10px 10px 10px 40px;
	border: solid 1px #D8D8D8;
	width: 100%;
	margin-bottom: 12px;
	color: #50556C;
}

#inputZipCode{
	background: #fff;
	padding: 10px 10px 10px 10px;
	border: solid 1px #D8D8D8;
	max-width: 100px;
	margin-bottom: 12px;
	color: #50556C;
}

#mainContainer form #access_country{
	padding: 10px 10px 10px 10px;
}
#mainContainer form #phone_number{
	background-image: url("images/phone-call.png");
	background-repeat: no-repeat;
	background-position: 10px center;
}

#mainContainer form #confirmation_code{
	background-image: url("images/icon-barcode_clock.png");
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 24px;
}

#mainContainer form #by_access_code{
	background-image: url("images/icon-access-code.png");
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 24px;
}

#mainContainer form #zipCode{
	background-image: url("images/icon-pin-map.png");
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 24px;
}

#mainContainer form #btnVefication,
#mainContainer form #btnCreateCode{
	color: #fff;
	width: 100%;
	background: #de4d38;
	border: solid 1px #de4d38;
	padding: 20px;
	font-size: 23px;
	display: block;
	text-align: center;
	cursor: pointer;
}

#holderCheckOptionUser{
	margin-bottom: 24px;
	font-size: 12px;
	text-align: right;
}

#holderCheckOptionUser #btnYesPhoneNumber,
#holderCheckOptionUser #btnNoPhoneNumber{
	color: #de4d38;
	text-decoration: none;
}


.title{
	color: #DE4D38;
	font-size: 16px;
	font-weight: bold;
}

.clearboth{
	clear: both;
}
.full-responsive{
	max-width: 100%;
	height: auto;
}


.sectionTwo{
	
	
}
.sectionTwo .infoOrder{
	padding-left: 45px;
	padding-top: 44px;
	padding-right: 37px;
	padding-bottom: 61px;
	background: #F4F4F4;
}

.sectionTwo .infoOrder #t_phone_cost,
.sectionTwo .infoOrder #t_upgrade,
.sectionTwo .infoOrder #t_payable,
.sectionTwo .infoOrder #t_taxes,
.sectionTwo .infoOrder #t_total,
.sectionTwo .infoOrder #t_price_old_device,
.sectionTwo .infoOrder #t_real_phone_cost{
	text-align: right;
	width: 100%;
	font-weight: bold;
	font-size: 16px;
}


.sectionTwo .infoOrder #t_payable{
	font-weight: bold;
	/*font-size: 24px;*/
}

.sectionTwo .infoOrder h1{
	font-size: 40px;
	color: #50556C;
}

.sectionTwo .infoOrder h2{
	font-size: 16px;
	color: #50556C;
	padding-bottom: 33px;
}

.sectionTwo .infoOrder .tableDetail{
	margin-top: 30px;
}

.sectionTwo .infoOrder .tableDetail td{
 	padding-bottom: 30px;
 	color: #50556C;
 	font-weight: 300;
}

.sectionTwo .infoOrder hr{
	height: 1px;
	background:#DE4D38;
	width: 100%;
	display: block;
	border-top: #DE4D38;
	margin-top: 0px;
	margin-bottom: 44px;
}

.sectionTwo .infoOrder .inputSection{
	padding-top: 9px;
	padding-bottom: 9px;
}

.sectionTwo .infoOrder .inputSection label{
	width: 100;
	display: block;
	color: #50556C;
 	font-weight: 300;

}

.sectionTwo .infoOrder .inputSection input[type=text],
.sectionTwo .infoOrder .inputSection textarea,
.sectionTwo .infoOrder .inputSection input[type=email],
.sectionTwo .infoOrder .inputSection select{
	width: 100%;
	padding: 14px;
	display: block;
	border: solid 1px #E0E0E1;
	border-radius: 5px;

}

.sectionTwo .infoOrder .inputSection input[type=text]::placeholder{
	color: #A3A5A7;
 	font-weight: 300;
 	font-size: 14px;
}

.sectionTwo .infoOrder .inputSection .submit{
	background: #DE4D38;
	color: #fff;
	font-size: 24;
	font-weight: 500;
	padding: 16px;
	width: 100%;
	display: block;
	border: solid 1px #DE4D38;
	margin-top: 28px;
}

/*error */

.errorMsgbox {
    color: #ba3939 !important;
    background: #ffe0e0 !important;
    border: 1px solid #a33a3a !important;
}

.barMsgbox {
    position: relative;
    padding: 10px;
    margin: 10px 0px;
    color: #333;
    background: #fafafa;
    border: 1px solid #ccc;
}

#holderThankYou{
	text-align: center;
}
.iconThankYou{
	padding: 10px;
}
.titleThankYou{
	font-size: 16px;
	font-weight: bold;
	color: #DE4D38;
	padding-top: 10px;
}

.descriptionThankYou{
	font-size: 20px;
	font-weight: 300;
	color: #50556C;
}

#footerThankYou{
	font-size: 16px;
	font-weight: 300;
	
	position: relative;
	text-align: center;
	bottom: 0px;
	text-align: center;
	width: 100%;
	padding-top: 100px;
}

#footerThankYou a:hover,
#footerThankYou a{
	text-decoration: none;
	color: #50556C !important;
}
/*smaller*/
#tableOrders_wrapper,
#tableOrders th,
#tableOrders td{
	font-size: 12px;
}

#tableOrders td select { 
	font-size: 16px;
}

.orderDenied{
	background: #ccc;
	border: solid 1 #ccc;
	border-radius: 4px;
  padding: 15px 23px;
  margin: 5px;
  display: inline-block;
}

.orderApproved{
  background: #DE4D38;
  border: solid 1 #DE4D38;
  border-radius: 4px;
  padding: 15px 15px;
  margin: 5px;
   display: inline-block;
   color: #fff;
}


.orderApprovedAlert{
  background: #DE4D38;
  border: solid 1 #DE4D38;
  border-radius: 4px;
  display: inline-block;
  color: #fff;
}
.orderApprovedAlert:hover{
	color: #fff;
}

.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box{
	border-top: solid 3px #DE4D38;
}

.jconfirm .jconfirm-box.jconfirm-type-orange {

}


@media screen and  (max-width: 1130px) {
	.grid-container-order  .sectionOne{
		flex-basis: 60% !important;
	}

	.grid-container-order .sectionTwo{
		flex-basis: 40% !important;
	}

	.container_phone .middle{
		flex-basis: 45%;
	}
}

@media screen and  (max-width: 1024px) {
	.ctrl_body_order{
		padding-left: 10px;
		padding-right: 10px;
	}

	.grid-container-order .sectionOne .ppleft{
		padding-left: 0px;
	}

	.ctrl_body{
		padding-left: 25px;
		padding-right: 25px;
	}

	.ctrl_body #ctrl_content_left h1.text{
		font-size: 35px;
	}
}

@media screen and  (max-width: 960px) {
	.ctrl_body_order{
		padding-left: 10px;
		padding-right: 10px;
	}

	.grid-container-order .sectionOne .ppleft{
		padding-left: 0px;
	}

	.grid-container-order  .sectionOne{
		flex-basis: 100% !important;
	}

	.grid-container-order .sectionTwo{
		flex-basis: 100% !important;
	}

	.container_phone .middle{
		
		margin:2% 2% 2% 2%;
	}

	#mainContainerHeader #ctrl_header .left{
		width: auto;
	}

	#mainContainerHeader #ctrl_header .right{
		width: auto;
		float: right;
		padding-top: 20px;
		padding-right: 20px;
	}
	
}

@media screen and  (max-width: 768px) {
	/*
	.grid-container-order  .sectionOne{
		flex-basis: 100% !important;
	}

	.grid-container-order .sectionTwo{
		flex-basis: 100% !important;
	}
	*/

	/*Grid phones*/
	.container_phone .middle{
		flex-basis: 100%;
		margin:2% 0% 2% 0%;
	}

	.ctrl_body #ctrl_content_left .text{
		font-size: 20px;
	}
	.grid-container{
		display: block;
		width: 100%;
	}

	#mainContainer form#searchPhone{
		max-width: 100% !important;
	}

	.ctrl_body #ctrl_content_left h1.text br {
    	display: none;
	}
	
	.cp_size_grid > div {
	  flex-basis: 48.5%;
	  margin-bottom: 10px; 
	}

}

.jconfirm .jconfirm-box,
.jconfirm-box {
	width: 400px !important;
}

/*Modal*/
.modal-ctrn {
  /* This way it could be display flex or grid or whatever also. */
  display: none;
  
  /* Probably need media queries here */
  width: 40%; /*600px;*/
  max-width: 100%;
  
  height: 80%; /*400px;*/
  max-height: 100%;
  

  position: fixed;
  
  z-index: 100;
  
  left: 50%;
  top: 10%;

  /*margin-top: -20%;*/
  margin-left: -20%;
  
  /* Use this for centering if unknown width/height */
  /*transform: translate(-50%, -50%);*/
  
  /* If known, negative margins are probably better (less chance of blurry text). */
  /* margin: -200px 0 0 -200px; */
  
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}
.modal_closed {
  display: none;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  
  background: rgba(0, 0, 0, 0.3);
  display: block;

}
.modal-guts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 30px 20px 20px 20px;
}



.modal-ctrn .close-button {
  position: absolute;
  
  /* don't need to go crazy with z-index here, just sits over .modal-guts */
  z-index: 1;
  
  top: 10px;
  
  /* needs to look OK with or without scrollbar */
  right: 20px;
  
  border: 0;
  background: black;
  color: white;
  padding: 5px 10px;
  font-size: 1.3rem;
  cursor: pointer;
}
#modal-body-ctrn{
	padding-bottom: 55px;
}
#modal-footer-ctrn{
	padding: 10px;
	padding-right: 20px;
	width: 100%;
	text-align: right;
	color: #fff;
	position: absolute;
	bottom: 0px;
	z-index: 1;
	background: #ccc;
}

.showPrice{
	height: 20px;
	padding: 3px;
	font-size: 16px;
	text-align: center;
	margin-top: 10px;
	font-weight: 700;
}

/* Loading */
#holderLoading{
	position: fixed;
	width: 80px;
	margin-top: -100px;
	top: 50%;
	left: 50%;
	margin-left: -40px;
	z-index: 100;
	display: block;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}