/* Ported from styles-css.tmpl */
body {
    font-family: "Inter", sans-serif;
    background-color: #141414;
    color: #fff;
}
img { height: auto; max-width: 100%; }
#wrapper { position: relative; width: 100%; overflow: hidden; }
.accordion .slide { display: none; }
#header { background-color: #fff; text-align: center; position: relative; }
#header a { text-decoration: none; }
#header .btn-back { position: absolute; left: 8px; top: 37px; }
.search-company { padding: 50px 0; }
.search-company .form-holder { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.search-company-form { position: relative; flex: 1; }
.search-company-form:before { content: ""; position: absolute; left: 13px; top: 8px; background: url(https://api.jumpcaller.se/logos/svg/search.svg) no-repeat; width: 23px; height: 23px; pointer-events: none; }
.search-company-form input[type="search"] { width: 100%; height: 40px; border-radius: 30px; outline: none; border: none; background: #0c0c0c; color: #fff; font-size: 19px; line-height: 30px; padding: 5px 15px 5px 44px; }
.search-company .form-holder .btn-cancel { color: #fff; font-size: 18px; font-weight: 500; text-decoration: none; margin-left: 15px; }
.search-company .form-holder .btn-cancel:hover { color: #e2e2e2; }
.search-company .search-results { list-style: none; padding: 0; margin: 0; }
.search-company .search-results li { border-bottom: 1px solid #333; }
.search-company .search-results a { display: flex; justify-content: space-between; align-items: center; color: #fff; text-decoration: none; font-weight: 500; padding: 15px 0; }
.search-company .search-results a:hover .arrow { opacity: 0.5; }
.search-company .search-results .company { display: flex; align-items: center; }
.search-company .search-results .company-logo { background-color: #fff; width: 30px; height: 30px; border-radius: 100%; display: flex; align-items: center; justify-content: center; margin-right: 15px; }
.errand-area { border-radius: 15px; background-color: #141414; margin-top: -15px; position: relative; z-index: 1; padding: 5px 0; }
.errand-area h1 { text-align: center; font-size: 23px; font-weight: 400; border-bottom: 2px solid #333; padding: 15px; }
.errand-list { list-style: none; padding: 0; margin: 0; }
.errand-list>li { border-bottom: 2px solid #333; }
.errand-list>li.active .opener { font-weight: 700; }
.errand-list>li.active .opener img { opacity: 0.5; transform: rotate(90deg); }
.errand-list .opener { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 500; padding: 15px 0; }
.errand-list .opener img { transition: all 0.3s ease-out; }
.errand-list .list { list-style: none; padding: 0 0 10px; margin: 0; }
.errand-list .list li { position: relative; padding: 5px 0; }
.errand-list .list .heading { font-size: 18px; font-weight: 600; }
.errand-list .list .heading .icon { width: 23px; margin-right: 10px; }
.errand-list .list dl { margin: 0; padding-left: 33px; overflow: hidden; }
.errand-list .list dl dt { font-weight: 400; float: left; margin-right: 5px; }
.errand-list .list dl dd { overflow: hidden; margin: 0; }
.errand-list li>a { color: #fff; text-decoration: none; }
.errand-list .list dl dd.red { font-weight: 600; color: #ea3528; }
.errand-list .list dl dd.green { font-weight: 600; color: #1dbf72; }
.errand-list .list .action { background-color: #fff; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; border-radius: 100%; display: flex; align-items: center; justify-content: center; }
.errand-list .list a:hover .arrow{ opacity: 0.5; }
.chat-section { border-radius: 15px; background-color: #141414; margin-top: -15px; position: relative; z-index: 1; }
.chat-section .heading-area { border-bottom: 2px solid #333; text-align: center; padding: 15px 15px 5px; }
.chat-section .heading-area dl { margin: 0 0 10px; }
.chat-section .heading-area dl dt, .chat-section .heading-area dl dd { display: inline-block; vertical-align: top; margin: 0; }
.chat-section .heading-area dl dt { font-weight: 400; }
.chat-section .heading-area h1 { font-size: 23px; font-weight: 400; }
.chat-section .switch-area { border-bottom: 2px solid #333; text-align: right; font-size: 15px; padding: 10px 0; }
.chat-section .switch-area .form-switch { padding: 5px 3em; }
.chat-section .form-switch .form-check-input { margin: 0 0 0 10px; float: none; width: 3em; height: 1.5em; }
.chat-section .chat-area { padding: 15px 0 60px; }
.chat-section .chat-area .row { margin: 0 -3px; }
.chat-section .chat-area .row>* { padding: 8px 3px; }
.chat-section .chat-area .owner { font-size: 10px; text-align: center; padding-top: 10px; }
.chat-section .chat-area .owner .icon { background-color: #fff; width: 50px; height: 50px; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 25px; margin: 0 auto 5px; }
.chat-section .chat-area .message { background-color: #f9f9f9; color: #000; font-size: 15px; line-height: 18px; border-radius: 15px; padding: 15px 15px 0; overflow: hidden; }
.chat-form { position: fixed; left: 0; right: 0; bottom: 0; background-color: #fff; display: flex; justify-content: space-between; padding: 10px 0; }
.chat-form .input-holder { flex: 1; }
.chat-form input[type="text"] { outline: none; width: 100%; height: 32px; border: none; border-right: 1px solid #cdcdcd; color: #c7c7c7; font-size: 15px; padding: 0 20px; }
.chat-form input[type="text"]::placeholder { color: #c7c7c7; }
.chat-form input[type="text"]::-ms-input-placeholder { color: #c7c7c7; }
.chat-form button[type="submit"] { border: none; background: none; padding: 0 15px; color: #3992bb; font-size: 14px; font-weight: 600; height: 32px; }
.call-section { border-radius: 15px; background-color: #141414; margin-top: -15px; position: relative; z-index: 1; }
.call-section .heading-area { border-bottom: 2px solid #333; text-align: center; padding: 15px 15px 5px; }
.call-section .heading-area dl { margin: 0 0 10px; }
.call-section .heading-area dl dt, .call-section .heading-area dl dd { display: inline-block; vertical-align: top; margin: 0; }
.call-section .heading-area dl dt { font-weight: 400; }
.call-section .heading-area h1 { font-size: 23px; font-weight: 400; }
.call-type-list { list-style: none; padding: 0; margin: 0 0 20px; }
.call-type-list li>a { display: block; border: 3px solid transparent; border-radius: 15px; color: #fff; text-decoration: none; padding: 10px; text-align: right; }
.call-type-list li.active>a{ border-color: #e2e2e2; }
.call-type-list li>a:hover{ border-color: #898989; }
.call-type-list li.active>a:hover { border-color: #e2e2e2; }
.call-type-list .row { text-align: left; margin: 0 -5px; }
.call-type-list .row>* { padding: 0 5px; }
.call-type-list .question-mark { display: inline-block; vertical-align: top; background-color: rgba(255,255,255,0.57); width: 12px; height: 12px; border-radius: 100%; text-align: center; line-height: 12px; font-size: 10px; color: #141414 !important; }
.call-type-list h2 { font-size: 20px; font-weight: 600; }
.call-type-list .price { font-size: 18px; }
.call-type-list .text-holder { border-radius: 4px; padding: 10px; overflow: hidden; }
.call-type-list .text-holder .icon { width: 20px; float: left; }
.call-type-list .text-holder .text { overflow: hidden; font-size: 15px; }
.call-type-list .after-text { font-size: 12px; display: block; padding-top: 5px; }
.choose-jumpcall { border-top: 1px solid #333; border-bottom: 1px solid #333; }
.choose-jumpcall .vidacard { display: flex; justify-content: space-between; align-items: center; color: #fff; text-decoration: none; padding: 15px 0; }
.choose-jumpcall .vidacard img { width: 30px; margin-right: 5px; }
.choose-jumpcall .button { display: block; text-align: center; border-radius: 5px; font-size: 20px; font-weight: 500; background-color: #ccc; text-decoration: none; color: #000; padding: 10px; }
.call-section .accordion-open { list-style: none; padding: 30px 0; margin: 0; font-size: 18px; }
.call-section .accordion-open .opener { display: block; color: rgba(255,255,255,0.49); font-weight: 600; }
.call-section .accordion-open .opener:after { content: ">"; margin-left: 20px; display: inline-block; vertical-align: middle; }
.call-section .accordion-open>li.active .opener:after { transform: rotate(90deg); }
.call-section .accordion-open .list { list-style: none; padding: 5px 0 20px; margin: 0; }
.call-section .accordion-open .list li { padding: 5px 0; }
.call-section .accordion-open a { color: #fff; text-decoration: none; }
.graph { position: relative; }
.graph .days-list { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; text-transform: uppercase; color: #a1a5ad; }
.graph .days-list a { display: block; color: #a1a5ad; border-bottom: 2px solid transparent; padding: 0 2px; }
.graph .days-list li.active a { border-color: #99bdff; }
.graph .wait-time { display: block; font-size: 15px; color: #cecdd3; font-size: 15px; padding: 20px 0 20px 40px; }
.graph .wait-time .red { color: #f6958b; }
.graph .graph-lines { border-top: 1px solid #5e5e62; border-bottom: 1px solid #5e5e62; position: relative; padding: 20px 0 2px; }
.graph .graph-lines:before, .graph .graph-lines:after { position: absolute; left: 0; right: 0; top: 33.33%; content: ""; height: 1px; background-color: #5e5e62; z-index: -1; }
.graph .graph-lines:after { top: 66.66%; }
.graph .graph-lines .bars { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; justify-content: center; }
.graph .graph-lines .bars li { background-color: #a2a5ad; border-radius: 30px; width: 10px; margin: 0 4px; position: relative; overflow: hidden; }
.graph .graph-lines .bars li.active:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background-color: #c7867e; border-radius: 30px; }
.graph .graph-numbers { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; font-size: 13px; font-weight: 500; color: #a1a5ad; }
.graph .graph-numbers li { padding: 8px 25px 0; position: relative; }
.graph .graph-numbers li:before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 1px; height: 5px; background-color: #a3a2a7; }


