/**
    Document   : daraja
    Created on : Oct 08, 2019, 11:14
    Contributors     : Kom Sihon, Silatchom SIAKA
    Description:
        Daraja extra styles
*/

#app-nav {display: none;overflow: hidden;height: 0;}
#content {min-height: 90vh}
.search-company {margin: 5vh 0 2vh;}
.company-list .ik-li {padding: 2px; height: 230px; margin-bottom: 5px; overflow: hidden}
/*.company-list .ik-li .actions {margin-top: 75px}*/
.company-list .ik-li .btn.show-modal-request {margin-top: 75px; width: 150px}
.company-list .ik-li:hover {background: #fff;}
.company-list .ik-li .image:hover, .company-list .ik-li .info {cursor: pointer;}
.company-list .ik-li .business {margin-top: 20px;}
.company-list .ik-li.disclosed {height: auto!important;cursor: pointer;}
.company-list .ik-li.disclosed .image, .company-list .ik-li.disclosed .info {height: auto!important;}
.company-list .ik-li.disclosed .company-description {line-height: 20px; padding-bottom: 30px; height: auto;}
.company-list .ik-li .about {margin-top: 90px; margin-bottom: 20px; text-align: justify;}
.company-list .ik-li.disclosed .about {margin-top: 30px;}
.company-list .ik-li .about h2,h3,h4,h5,h6 {color: #464646; font-weight: 600; margin-top: 16px; margin-bottom: 16px}
.company-list .ik-li .about h4:not(:first-of-type) {margin-top: 30px}
.company-list .ik-li .company-url {margin-top: 60px;}
.info:active {height: inherit!important;}
.info-header {margin-bottom: 10px;}
.info-header .full_name {display: inline; margin: 0;}
.info-header .share-rate {padding: 7px;}
.monthly-income {font-size: 30px; color: #2c3e50;}
.estimate-earnings >* {padding: 0; font-size: 14px}
.company-list .ik-li .image {height: auto; background-size: cover;width: 120px;}
.company-list .ik-li .info {padding: 10px 0;}
.company-list .ik-li h3 {font-weight: 700; margin: 0 0 20px}
.company-list .ik-li ul {padding-left: 0}
.company-list .ik-li ul li {border-bottom: 1px solid #ddd;display: block;height: 40px;padding-top: 8px;}
.company-list .ik-li ul li:first-child {height: 32px;padding-top: 0}
.company-list .ik-li ul li:last-child {border-bottom: #fff}
.company-list .image i {color: #dae1e8; line-height: 1.5;}
.company-list .image {text-align: center; padding: 10px;}
.kid .status-bullet {border: 2px solid #fff;box-sizing: content-box;float: right;height: 10px;width: 10px;}
.kid .img-thumbnail {border-radius: 50%}
#modal-confirm-accept .modal-body, #modal-confirm-refuse .modal-body {padding-top: 0}
#modal-confirm-accept h3, #modal-confirm-refuse h3 {margin-top: -15px}
#modal-confirm-accept .notice, #modal-confirm-refuse .notice {margin-bottom: 42px}
#admin-nav .ik-li .info {width: 167px;}
.title-brand {font-weight: 600;padding: 0 10px;font-size: 21px}
.title-brand:hover {text-decoration:none}
.pending-invoices .payment-start {margin-top: 1vh;min-width: 150px;}
#search-other-school {border-top: 1px solid #eee; margin-top: 6vh; padding-top: 2vh}
#search-other-school h4 {font-weight: 700}
#search-other-school .search-company {margin-top: 3vh}
.member:not(.tpl):last-child, .ik-li:not(.tpl):last-of-type {border-bottom: none}
.school-avatar {font-size: 60px;color: #bfc5d8;line-height: 80px;}
.social-share {color: #fff; width: 100%!important;}
.search-school {margin: 9vh 0;}
.dara-details {margin-top: 40px; margin-bottom: 5vh;}
.dara-basic-info {margin-top: 8vh;}
.dara-description {margin-top: 10vh; padding-top: 6vh; border-top: 1px solid #bfc5d8; line-height: 30px; text-align: justify;}
.agreement {margin-top: 9vh; margin-bottom: 9vh;}
.main-img {width: 125px!important;}
.invitation-accepted {display: none; font-size: .9em; margin-top: 5vh}
.main-title {padding: 4vh 0;font-weight: bold;line-height: 35px;font-size: 30px;}
.main-title > h2 {font-weight: 600}
.main-title p {font-weight: 300;}
.get-started {display: none; font-size: .9em; margin-top: 5vh}
.invitation {line-height: 2}
.badge-0 {background-color: #e75d44;}
.badge-5 {background-color: #ee9939;}
.badge-10 {background-color: #3759fa;}
.badge-20 {background-color: #11aa08;}

.level-1 {background-color: #004f72}
.level-2 {background-color: #8f4979}
.level-3 {background-color: #88500d}

.level-1-xp-0 {background-color: #e75d44; width: 10%}
.level-1-xp-1 {background-color: #ee9939; width: 30%}
.level-1-xp-2 {background-color: #1a7235; width: 50%}
.level-1-xp-3 {background-color: #004f72; width: 75%}
.level-2-xp-0 {background-color: #e75d44; width: 10%}
.level-2-xp-2 {background-color: #ee9939; width: 40%}
.level-2-xp-5 {background-color: #1a7235; width: 60%}
.level-2-xp-10 {background-color: #004f72; width: 75%}
.level-3-xp-0 {background-color: #e75d44; width: 5%}
.level-3-xp-2 {background-color: #ee9939; width: 15%}
.level-3-xp-5 {background-color: #1a7235; width: 30%}
.level-3-xp-7 {background-color: #004f72; width: 45%}
.level-3-xp-10 {background-color: #5f3672; width: 50%}
.level-3-xp-15 {background-color: #722336; width: 55%}
.level-3-xp-18{background-color: #720707; width: 60%}
.level-3-xp-23 {background-color: #723112; width: 65%}
.level-3-xp-28 {background-color: #72480d; width: 70%}
.level-3-xp-33 {background-color: #727210; width: 75%}
.level-3-xp-38 {background-color: #044a4c; width: 80%}
.level-3-xp-40 {background-color: #4b4f72; width: 85%}
.level-3-xp-45 {background-color: #0076ac; width: 90%}

/*.share-rate {padding: 0px; border-bottom: none!important; margin-bottom: 5px;}*/
.share-rate {font-size: 16px; font-weight: 400; line-height: 23px; border-radius: 0}
.avg-purchase > span {font-size: 17px; color: #4d4d4d;}
.simulate-earning-container {position: absolute; top: 75%; right: 3%;}
.company-list .info > ul {margin-top: -15px;}
.company-basic-info {border-bottom: none!important;}
.company-image > div {padding: 20%}
.company-image img {width: 100px}
#not-yet-dara-msg, #anonymous-user-msg {height: 120px; color: #fff; font-size: 16px;}
.actions .apply.request {width: 200px;}

#acknowledgement .modal-content {border: 0}
#acknowledgement .modal-header {background-size: cover; background-repeat: no-repeat; background-position: center; color: #fff; height: 200px; padding: 0;}
#acknowledgement .modal-header .bgd-image {background-color: rgba(47,47,47,0.61); height: inherit; padding-top: 10px;}
#acknowledgement .modal-body {padding: 10px 0!important;}

.ik-li .other-details {padding-left: 20px;}

@media (width: 768px) {
    .company-list .ik-li {height: 350px;}
    .estimate-earnings >*:not(:first-child) {margin-top: 20px;}
}

@media (max-width: 767px) {
    .company-list {margin: 0 -12px}
    .company-list .ik-li {height: 400px;}
    .company-list .ik-li h3 {font-size: 18px;margin-bottom: 10px;}
    .company-list .ik-li .info {padding: 3px 0 10px;max-width: 180px;}
    .company-list .ik-li ul li {height: 30px;padding-top: 4px;}
    .company-list .ik-li ul li:first-child {height: 26px;padding-top: 0}
    .estimate-earnings >*:not(:first-child) {margin-top: 20px;}
    .title-brand {margin-top: 3vh;display: block;}
    div#container.admin {padding-top: 55px;}
    #student-details .basic {clear: both;padding-top: 15px;}
    .ik-li:not(.selected):hover .actions {right: 15px;}
    .dara-basic-info .phone {margin-top: 10px; margin-bottom: 10px;}
    .main-img {width: 100px!important;}
    .invitation {line-height: 1.7}
    .company-list .image i {font-size: 16vw;}
    .company-list .info > ul {margin-top: -6px;}
    .share-rate {font-size: 15px; line-height: 20px;}
    /*.share-rate { margin-bottom: 0px;}*/
    .avg-purchase > span {font-size: 14px;}
    .company-image img {width: 65px}
    .actions .apply.request {width: auto;}
    .company-list .ik-li.disclosed .company-url {margin-top: 20px;}
    /*.company-list .ik-li.disclosed .info .details {display: none; visibility: hidden;}*/
    /*.companyl-list .ik-li.disclosed .other-details .detail*/
}

@media (min-width: 768px) {
    .company-list .ik-li {box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .15); padding: 2px 10px 2px 2px; margin-bottom: 12px}
    .company-list .ik-li .image {width: 200px;}
    .company-list .ik-li .info {max-width: 260px}
    div#container.admin {padding-top: 65px}
    .company-list .image i {font-size: 15vw;}
}
@media (min-width: 992px) {
    .title-brand {margin-top: -2px;}
    .company-list .ik-li .info {max-width: 500px; width: 350px}
    .company-list .ik-li .btn.show-modal-request {margin-top: 75px; width: 180px}
}

@media (min-width: 1024px) {
    .company-list .image i {font-size: 10vw;}
}

@media (min-width: 1200px) {
    .company-list .ik-li .info {max-width: 800px; width: 500px}
    .company-list .image i {font-size: 8vw;}
}

@media (min-width: 2560px) {
    .company-list .image i {font-size: 5vw;}
}