/* basic styles */
*{font-size:16px; color:rgba(0,0,0,0.8); font-family:Arial}
ul li{list-style-image: url("/files?f=bullet.png")}
div{float:left}
#content{float:left}
#content div{float:none}
#content div.popupclose{float:right}

/* menu */
#menubg,#menu,#submenu,#subsubmenu{background:#00605B}
#menu li.active, #menu li:hover{background:#95D600;color:#00605B}
#menu li a{color:white}
#menu li.active>a, #menu li:hover>a{color:#00605B}
#menu ul#mainmenu li{height:22px; padding:9px 0; font-weight:bold}
#menu ul#submenu{margin-top:7px}
#menu ul#submenu li, #menu ul#subsubmenu li{font-weight:normal}

/* menumobile */
#menumobile,#menumobilepopup{background:#00605B}
#menumobile .mobilemenuicon{background:url('/cmsstatic/img/mobilemenu.png') no-repeat}
#menumobilepopup .active{background:#95D600}
#menumobilepopup p, #menumobilepopup .switchtodesktop{color:white}
#menumobilepopup .active p{color:#00605B}
#menumobilepopup .open{background:url('/cmsstatic/img/plus_big.png') no-repeat center center}
#menumobilepopup .open.opened{background:url('/cmsstatic/img/minus_big.png') no-repeat center center}

/* content */
.box,.box_small,.box_big,.box_triple,.box_variable{background:rgba(255,255,255,0.85)}
.box.reverse{background:#00605B}
.box.reverse p,.box.reverse a,.box.reverse li{color:white}

.title, h1, h1 *{font-size:26px; color:#00605B; font-weight:normal}
.subtitle, h2, h2 *{font-size:20px; color:#00605B; font-weight:normal}

#content div.simplebutton,#content div.actionbtn{float:left}
.simplebutton,.actionbtn{height:24px; cursor:pointer; border:none; background:#00605B; color:white; padding: 2px 5px; border-radius:8px}
.simplebutton:hover,.actionbtn:hover{background:rgba(0,96,91,0.85)}

#content div.button{display:flex; float:right}
.button .left{width:8px; height:100%; background:#00605B; border-radius:8px 0 0 8px}
.button:hover .left{background:rgba(0,96,91,0.85)}
.button .right{width:8px; height:100%; background:#00605B; border-radius:0 8px 8px 0}
.button:hover .right{background:rgba(0,96,91,0.85)}
.button .bg{height:100%; background:#00605B; padding: 0 10px 0 5px}
.button:hover .bg{background:rgba(0,96,91,0.85)}

.spusulist{float:none; width:auto}
.spusulist li{font-weight:bold; padding:0; list-style:none; margin:0}
.spusulist li.active{color:#00605B}
.spusulist li.finished{color:#00605B}
.list li{font-weight:normal}
.list li.active,.list li.finished{font-weight:bold; color:#00605B}

.divider{background:#00605B; width:100%; height:5px; margin:5px 0}
.divider.small{height:1px}

td{vertical-align:middle}
select{background:#95D600; border:none; border-radius:8px; padding:3px 0 3px; text-indent:3px; height:28px}
select option{background:#95D600; text-indent:10px}
input{height:28px}
input,textarea{background:#95D600; border:none; border-radius:8px; text-indent:10px; float:left}
input[type="file"]{text-indent:0}
input.center{text-align:center; text-indent:0}
input.size1, select.size1{width:300px}
.dialog table input.size1, .dialog table select.size1{width:120px}
input.size2, select.size2{width:100px}
input.size3, select.size3{width:60px}
input.size4, select.size4{width:70px}
input.error,select.error{border:3px solid red}
input[type="radio"].error ~ label{color:red}
input[type="radio"],input[type="checkbox"]{margin:5px 5px 0 0; height:auto; background:none}
input.trans:disabled,textarea.trans:disabled,select.trans:disabled{background:#CDE19A; color:grey}
input.text:disabled,textarea.text:disabled,select.text:disabled{background:#D2D2D2; border:none; color:rgba(0, 0, 0, 0.8)}
input:disabled,textarea:disabled,select:disabled{background:#A2A2A2; color:white}
input.colored:disabled,textarea.colored:disabled,select.colored:disabled{background:#00605B; color:white}

/* HotComboBoxV3 */
.searchBox{border-radius: 8px 0 0 8px}
a.dropdownV2{background:url('/cmsstatic/img/spusu/combo_arrow_0.png') no-repeat}
a.dropdownV2:hover{background-image:url('/cmsstatic/img/spusu/combo_arrow_1.png')}
ul.optionListV2{background-color:#95D600}

#sitebg{margin-top:-5px;position:absolute;left:0;width:100%;z-index:-10;background-repeat:no-repeat;background-size:cover;background-color:#565656}
#sitebg #bg{height:100%;width:100%;max-height:1800px;background-repeat:no-repeat;background-size:cover}

#content div.spusuwhitebox{float:left; background:rgba(255, 255, 255, 0.85);float:left;max-width:780px;clear:left;margin:50px 0 100px 30px;padding:40px 60px}
#content div.spusubox{float:left; background:rgba(255, 255, 255, 0.85);float:left;max-width:780px;clear:left;margin:50px 0 100px 30px;padding:40px 60px}

@media (max-width:960px) {
	#content div.spusuwhitebox,#content div.spusubox{margin:0 0 50px 0!important; width:100%!important; max-width:100%; box-sizing:border-box!important; padding:40px 5%}
}

.faqA,.faqA *{font-weight:bold;color:#00605B}

.minus{background-image:url('/cmsstatic/img/spusu/change_quantity.png')}
.minus:hover{background-image:url('/cmsstatic/img/spusu/change_quantity.png')}
.plus{height:17px; width:16px; background-image:url('/cmsstatic/img/spusu/change_quantity.png')}
.plus:hover{height:17px; width:16px; background-image:url('/cmsstatic/img/spusu/change_quantity.png')}

.checkbox{background-color:#00605B; border-radius:8px; color:white}
.checkbox.on{background-color:#95D600;color:rgba(0,0,0,0.6)}
.checkbox[disabled]{background:#9BC0BE;color:white}
.checkbox.on[disabled]{background:#CDE19A;color:grey}

#content .spusudetail.white * {color:white}
#content .spusudetail .title{position:absolute; font-weight:bold; margin:15px 0 0 40px}
#content .spusudetail .subtitle{position:absolute; font-weight:bold; font-size:16px; margin-left:40px}
#content .spusudetail .description{position:absolute; font-size:14px; margin:60px 0px 0px 40px; width:270px; line-height:1.2; color:#00605b}
#content .spusudetail.white .description{color:white}
#content .spusudetail br{line-height:0.9}
#content .spusudetail span,#content .spusudetail a{float:left; clear:both; padding-top:7px; color:inherit; font-size:14px}

#content .dataTables_wrapper .dataTables_filter label{color:#00605B}
#content .dataTables_paginate .paginate_button.current{color:#00605B}
#content .dataTables_wrapper .dataTable thead *{color:#00605B}
#content .dataTables_wrapper .dataTable thead tr{border-bottom:1px solid #00605B}
#content .dataTables_wrapper td,#content .dataTables_wrapper th{border-left:1px solid #00605B}
#content .dataTables_wrapper .dataTable th.sorting{background-image:url("/cmsstatic/img/spusu/sort_both.png")}
#content .dataTables_wrapper .dataTable th.sorting_asc{background-image:url("/cmsstatic/img/spusu/sort_asc.png")}
#content .dataTables_wrapper .dataTable th.sorting_desc{background-image:url("/cmsstatic/img/spusu/sort_desc.png")}
#content .dataTables_wrapper .dataTable th.sorting_asc_disabled{background-image:url("/cmsstatic/img/spusu/sort_asc_disabled.png")}
#content .dataTables_wrapper .dataTable th.sorting_desc_disabled{background-image:url("/cmsstatic/img/spusu/sort_desc_disabled.png")}
.dt-button{background:#00605B; padding: 2px 5px; border-radius:8px}
.dt-button:hover{background:rgba(0,96,91,0.85)}

/* menuswitch */
#content .menuswitch{border-top:1px solid #00605B !important}

#content .formGroupTitle, #content .formGroupTitle *{color:#00605B;font-size:20px}

/* header */
#header{display:flex; justify-content:space-around}

/* sitemap */
#sitemap{background:#00605B}
#sitemap *{color:white; font-size:12px; line-height:1}

/* footer */
#footer{background:white repeat; position: fixed; bottom: 0px; left: 0px; width: 100%; z-index:99}
#footer *{color:#565656; font-weight:bold; text-align:center}
#footer table{padding-left:calc(100vw - 100%)}
#footer td,#footer td:last-child{padding:6px 5px 3px !important}

/* order process */
.orderprocess{width:820px; margin-left:-20px}
.orderprocess h1{width:100%; font-size:1.5em}
.orderprocess .info{width:1em !important; height:1em !important; background-size:cover; margin-top:2px}
.orderprocess select{text-indent:5px}
.orderprocess .divider{width:100%; height:1px; margin:1em 0}
.orderprocess .simplebutton{height:auto; align-self:center}
.orderprocess input, .orderprocess select{height:auto}
.orderprocess input[type="radio"],.orderprocess input[type="checkbox"]{font-size:1em; min-width:1em; width:1em; min-height:1em; height:1em; margin-right:0.5em}
.orderprocess input[type="file"]{min-width:max-content}
.orderprocess .simplebutton.active{background:#219C95}
.orderprocess .simplebutton.inactive{background:#A2A2A2}
.orderprocess .addanothertariff a{display:flex; width:max-content}
.orderprocess .addanothertariff img{margin:0.25em 0.5em 0 0; height:1em; width:1em}

.orderprocess .saveButtonDiv{display:flex; width:100%; justify-content:space-between}
.orderprocess .saveButtonDiv > p{color:red; margin-right:1em}

.orderprocess .tarifflist{display:flex; flex-direction:column}
.orderprocess .tarifflist .tariffname{font-weight:bold; width:250px}
.orderprocess .tarifflist .entry{display:flex; justify-content:space-between; flex-grow:1}
.orderprocess .tarifflist .delete{cursor:pointer; margin-top:2px; width:20px; height:20px; background:url('/static/img/Delete.png') no-repeat}
.orderprocess .tarifflist .delete:hover{background:url('/static/img/Delete_active.png') no-repeat}
.orderprocess .tarifflist .chooseNumber{flex-direction:column}
.orderprocess .chooseNumberInputs{display:flex; flex-direction:column}
.orderprocess .chooseNumberInputs > *{width:100%; flex-grow:1; margin-top:0.5em}
.orderprocess .tarifflist .entryInputs{display:flex; flex-direction:column; width:100%; margin-top:20px}
.orderprocess .tarifflist .entryInputs > div, .orderprocess .customerdata > div{display:flex; margin-bottom:10px}
.orderprocess .tarifflist .entryInputs > div > *, .orderprocess .customerdata > div > * {width:250px}

.orderprocess .customerdata{display:flex; flex-direction:column; width:100%; max-width:500px; margin-top:20px}
.orderprocess .customerdata > div input, .orderprocess .customerdata > div select{flex-grow:1}

.orderprocess .costoverview{display:flex; flex-direction:column}
.orderprocess .costoverview > *{margin-top:10px}
.orderprocess .costoverview .orderInfoCostTable{width:min-content}
.orderprocess .costoverview .orderInfoCostTable p{white-space:nowrap}
.orderprocess .costoverview .orderInfoCostTable tr:last-child{border-top:1px solid #00605B}
	
.orderprocess .paymentMethods{display:flex; flex-direction:column; width:100%}
.orderprocess .paymentMethods > p{margin-top:1em}
.orderprocess .paymentMethods > div{display:flex; width:max-content}
.orderprocess .paymentMethods > div .toggle{margin-left:1em}
.orderprocess .paymentMethods > div .toggle ~ div{display:flex; justify-content:space-between}
.orderprocess .paymentMethods > div .toggle ~ div img{margin-left:0.5em; object-fit:contain}
.orderprocess .paymentMethods .paymentMethodSubElements{display:none; flex-direction:column; margin:0.5em 0 0 2em; width:100%; max-width:300px}
.orderprocess .paymentMethods .paymentMethodSubElements > *{margin-bottom:0.5em}

.orderprocess .orderConfirmDiv{display:flex; flex-direction:column}
.orderprocess .orderConfirmDiv p{margin-right: 0.5em}
.orderprocess .orderConfirmDiv > div{display:flex; margin-top:1em}
.orderprocess .orderConfirmDiv > div:first-child{margin-top:0}

.orderprocess .paymentFailedButtons{display:flex; flex-direction:row-reverse; flex-wrap:wrap; justify-content:space-between}
.orderprocess .paymentFailedButtons > div{display:flex; flex-direction:column; width:max-content}
.orderprocess .paymentFailedButtons .simplebutton{margin-top:1em; width:100%}

.orderprocess .portingEntry{display:flex; flex-direction:column; width:100%; max-width:500px}
.orderprocess .portingEntry > div{display:flex; justify-content:space-between; width:100%; max-width:500px}
.orderprocess .portingEntry > div > *{width:250px}
.orderprocess .portingEntry > div > div{display:flex; flex-direction:column}
.orderprocess .portingEntry > div input, .orderprocess .portingEntry > div select{flex-grow:1}
.orderprocess .portingEntry input, .orderprocess .portingEntry select, .orderprocess .portingEntry p, .orderprocess .portingEntry .simplebutton{margin-top:0.5em}
.orderprocess .portingEntry p.toggle input{margin-top:0.25em}
.orderprocess .portingEntry .simplebutton p{margin-top:0}
.orderprocess .portingEntry > p{margin-top:1em}
.orderprocess .portingEntry > p:first-child{margin-top:0}
.orderprocess .portingEntry .cancelcontract > div{display:flex}
.orderprocess .portingEntry .cancelcontract .info{margin:10px 0 0 5px}

.orderprocess .chooseButtons{display:flex; flex-direction:column; width:100%}
.orderprocess .chooseButtons > div{margin-top:1em; display:flex; width:100%}
.orderprocess .chooseButtons > div > p{margin-top:2px; width:100%; max-width:630px}
.orderprocess .chooseButtons > div > .simplebutton{width:150px; margin-right:10px}
.orderprocess .identmethodinputs{margin-bottom:2em; width:max-content; max-width:500px; padding-left:170px}
.orderprocess .identmethodinputs select, .orderprocess .identmethodinputs input, .orderprocess .identmethodinputs > p{width:100%}
.orderprocess .identmethodinputs .simplebutton{margin:1em 0 0 0; float:right !important}
.orderprocess .customerdataerror{display:flex; flex-direction:column; width:max-content; margin:2em auto 1em}
.orderprocess .customerdataerror > div{display:flex; justify-content:space-between}
.orderprocess .customerdataerror img{width:1em; height:1em; margin:auto 0 auto 1em}
.orderprocess .customerdataerror table{width:100%; max-width:100%}
.orderprocess .customerdataerror table td:first-child{text-align:right}
.orderprocess .customerdataerror table td{vertical-align:middle}
.orderprocess .customerdataerror table img{margin:auto 0}

.orderprocess .downloadSection{display:flex; flex-direction:column; width:400px; margin: 0 auto}
.orderprocess .downloadSection > *{margin-top:1em; margin-bottom:0}
.orderprocess .downloadSection > .divider{margin-top:2em}
.orderprocess .downloadSection input, .orderprocess .downloadSection .simplebutton.mainbutton{margin-top:inherit; margin-bottom:inherit; align-self:start}

.orderprocess img.qrcode{width:200px}

@media (max-width:960px) {
	.orderprocess{width:100%; margin:0}
	.orderprocess h1{font-size:3em}
	.orderprocess p, .orderprocess a, .orderprocess label, .orderprocess input, .orderprocess select, .orderprocess li, .orderprocess summary{font-size:2em}
	.orderprocess p a, .orderprocess a p, .orderprocess label a{font-size:1em}
	.orderprocess .newNumberDiv select{text-indent:0}
	.orderprocess .toggle label{font-size:inherit}
	.orderprocess .info, .orderprocess .tarifflist .delete{width:2em !important; height:2em !important; background-size:cover !important}
	.orderprocess .divider{height:2px; margin:2em 0}
	.orderprocess input, .orderprocess select{width:inherit}
	.orderprocess .simplebutton.mainbutton{width:100%; text-align:center; margin-top:2em; margin-bottom:2em; margin-left:0 !important; margin-right:0 !important; padding:1em 0}
	.orderprocess .addanothertariff img{margin:0.5em 1em 0 0; height:2em; width:2em}

	.orderprocess .saveButtonDiv{flex-wrap:wrap}
	.orderprocess .saveButtonDiv > p{width:100%; margin-right:0}
	
	.orderprocess .tarifflist > *{width:100%; flex-wrap:wrap}
	.orderprocess .tarifflist .entry{width:100%; flex-wrap:wrap}
	.orderprocess .tarifflist .entry > *, .orderprocess .tarifflist .entry .tariffname{width:100%}
	.orderprocess .tarifflist .entry > *:last-child{margin-bottom:0}
	.orderprocess .tarifflist .tariffDetails{width:100%; flex-direction:row; flex-wrap:wrap; justify-content:space-between; margin-top:0}
	.orderprocess .tarifflist .tariffDetails > p{margin-right:5%}
	.orderprocess .tarifflist .chooseNumber{flex-direction:column}
	.orderprocess .tarifflist .newNumberDiv{justify-content:flex-start}
	.orderprocess .tarifflist .newNumberDiv select{width:auto; margin:0}
	.orderprocess .tarifflist .portingDiv{justify-content:space-between}
	.orderprocess .tarifflist .portingDiv input, .orderprocess .tarifflist .portingDiv select{width:47%; margin:0}
	.orderprocess .tarifflist .esimDiv{margin-top:1em; width:100%; display:flex}
	.orderprocess .tarifflist .delete{margin:5px 0 0 5px}
	.orderprocess .tarifflist .entryInputs, .orderprocess .tarifflist .entryInputs > div > *{width:100%; max-width:unset}
	
	.orderprocess .customerdata{max-width:unset}
	.orderprocess .customerdata > div > p, .orderprocess .customerdata > div > div {width:100%}
	
	.orderprocess .costoverview > *{margin-top:1em}
	.orderprocess .costoverview .orderInfoCostTable{width:100%}
	
	.orderprocess .paymentMethods > div{display:flex; width:100%}
	.orderprocess .paymentMethods .toggle ~ div img{object-position:left}
	.orderprocess .paymentMethods .paymentMethodSubElements{margin:0.5em 0 1em 1em; max-width:100%}
	
	.orderprocess .orderConfirmDiv > *{width:100%}
	.orderprocess .orderConfirmDiv #orderAGB{font-size:2em; width:2em; height:auto}

	.orderprocess .paymentFailedButtons{flex-direction:row; width:100%}
	.orderprocess .paymentFailedButtons > div{width:100%}
	
	.orderprocess .portingEntry, .orderprocess .portingEntry div, .orderprocess .portingEntry input, .orderprocess .portingEntry select{max-width:100%}
	.orderprocess .portingEntry div > *{width:auto; max-width:100%; flex-grow:1}
	.orderprocess .portingEntry p{flex-grow:0}
	.orderprocess .portingEntry .cancelcontract .info{flex-grow:0; margin:1.25em 0 0 0.5em}
	
	.orderprocess .chooseButtons, .orderprocess .identmethodinputs, .orderprocess .identmethodinputs select, .orderprocess .identmethodinputs input{width:100%}
	.orderprocess .chooseButtons > *{margin:1em 0 0 0}
	.orderprocess .chooseButtons > div{flex-wrap:wrap}
	.orderprocess .chooseButtons > div > .simplebutton{width:100%}
	.orderprocess .identmethodinputs{padding-left:0; width:100%; max-width:100%}
	.orderprocess .customerdataerror img{width:2em; height:2em}

	.orderprocess img.qrcode{width:25em}
	
	#infoBox {left:0 !important; max-width:unset}
	#infoBox, #infoBox p{font-size:2em}
	
	#popup p{margin:0.5em; font-size:2em}
	#popup .popupclose{width:2em; height:2em; background-size:contain}
}

/*eSIM manual*/
.manualBox {background-color: #95D600; width: 27em; height: 12.5em; border-radius: 8px;}

.manualBox .manualHeader {background-color: #00605B; height: 2em; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.manualBox .manualHeader .headerText {padding-left: 0.5em; padding-top: 0.25em; color: white;}
.manualBox .manualHeader .headerText .deviceSelector {display: inline-block; padding-top: 0px; border: none; border-radius: 5px; padding-left: 0.25em; width: 12em; height: 1.5em; background-color: #96D600; color: white; -webkit-box-sizing: border-box; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #00605B 50%), linear-gradient(135deg, #00605B 50%, transparent 50%), linear-gradient(to right, #95D600, #95D600); background-position: calc(100% - 12.5px) calc(1em - 7px), calc(100% - 6px) calc(1em - 7px), 100% 0; background-size: 7px 7px, 7px 7px, 2.5em 2.5em; background-repeat: no-repeat;}

.manualBox .manualDescription {overflow-y: scroll; scrollbar-color: #00605B #95D600; background-color: #95D600; height: 10.5em; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
.manualBox .manualDescription .descriptionText {padding-left: 0.5em; padding-top: 0.8em; line-height: 0em;}

div::-webkit-scrollbar {width: 12px;}
div::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); border-radius: 10px;}
div::-webkit-scrollbar-thumb {border-radius: 10px; background-color: rgba(0,96,92,0.7)}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	select{border-radius:8px 0 0 8px !important; padding:3px 2px 2px 8px !important}
	input[type="radio"]{background:none !important}
	input[type="file"]{background:none !important}
}

@media print {
	#footer{display:none}
}