@font-face {
    font-family: 'OpenSans';
    src: url("../../fonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans-Light';
    src: url("../../fonts/OpenSans-Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans-SemiBold';
    src: url("../../fonts/OpenSans-SemiBold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans-Bold';
    src: url("../../fonts/OpenSans-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'OpenSans' !important;
    font-size: 14px;
    background-color:#faf9f9;
}
.ar-content-container {

}
.ar-content {
    background-color:#fff;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    border-radius:8px;
    -moz-border-radius:8px; 
    -webkit-border-radius:8px;
    overflow-y:hidden;
    box-shadow:0 0 20px 0 #dedede;
}
.scrollable-content {
    height:100%;
    overflow-y:scroll;
}
.ar-content .header {
    background-color:#E6E7E8;
    padding:15px 25px;
    font-family:'OpenSans-Bold';
    font-size:15px;
}
.top-rounded {
    border-radius:8px 8px 0 0;
    -moz-border-radius:8px 8px 0 0; 
    -webkit-border-radius:8px 8px 0 0;
}
.ar-content .content-ctrl:first-of-type {
    margin:10px 15px;
}
.ar-content .content-ctrl {
    margin:20px 15px;
}
.ar-content .content-ctrl .ar-label {
    padding:5px;
    color:#999;
}
.ar-content .content-ctrl .ar-value {
    padding:5px;
    font-family:'OpenSans-SemiBold';
}
.left-align {
    width:50%;
    text-align:left;
}
.right-align {
    width:50%;
    text-align:right;
}
.bolder {
    font-family:'OpenSans-SemiBold';
}
.boldest {
    font-family:'OpenSans-Bold';
}
.ar-btn-bottom {
    line-height:48px;
    background-color:#ED3F23;
    width:100%;
    display:block;
    text-align:center;
    color:#fff;
    font-size:15px;
    font-family:OpenSans-SemiBold;
    border-radius:5px;
    -moz-border-radius:5px; 
    -webkit-border-radius:5px;
}
.ar-link, .ar-link:hover, .ar-link:active, .ar-back-link, .ar-back-link:hover, .ar-back-link:active {
    text-decoration:none;
    cursor:pointer;
}
.ar-link:hover, .ar-link:active {
    color:#990a00;
}
.ar-back-link {
    color:#333;
}
.ar-back-link:hover, .ar-back-link:active {
    color:#000;
}
hr {
    margin-top:0px !important;
    margin-bottom:0px !important;
}
.ar-page-active {
    display: block;
}
.ar-page-inactive {
    display: none;
}
.glyphicon {
    top:2px !important;
}
.payment-method-item {
    margin:0 10px;
    padding:10px 5px;
    border-bottom:1px solid #e8efef;
    cursor:pointer;
}
.selectable {
    cursor:pointer;
}
.payment-method-item-container {
    display:flex;
    padding:0px 20px;
}
.payment-guide-item {
    padding:0px;
    cursor:pointer;
}
ol li {
    padding:10px;
}
.content-ctrl-stacked {
    display:flex;
}
.content-ctrl-left-70 {
    width:70%;
}
.content-ctrl-right-30 {
    width:30%;
}
.vertical-center {
    display:flex;
    align-items:center;
}
.payment-guide-item-container {
    display:flex;
    padding:10px 20px 20px 20px;
    margin:10px 5px 0px 5px;
    border-bottom:1px solid #e8efef;
}
.ar-alert {
    background-color:#929092;
    padding:15px;
    margin:10px;
    border-radius:5px;
    -moz-border-radius:5px; 
    -webkit-border-radius:5px;
    color:#fefefe;
    -webkit-font-smoothing:antialiased;
}
.ar-info {
    background-color:#FFF7E2;
    color:#666;
    font-size:12px;
    padding:10px 25px;
}
.rating-container {
    margin-bottom:10px;
}

.arsitag-grey {
    color:#fff;
    background-color:#929092;
}
.arsitag-yellow {
    color:#fff;
    background-color:#D2BC04;
}
.arsitag-green {
    color:#fff;
    background-color:#1ebea5;
}
.arsipro-status {
    padding:5px;
    text-align:center;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.arsitag-button {
    padding:8px 20px;
    background-color:#ED3F23;
    color:#fff;
    text-decoration:none;
    text-align:center;
}
.ar-button-bottom-container {
    padding:20px 25px;
    width:100%;
    position:absolute;
    bottom:0px;
    line-height:1.88;
}
.padding-empty {
    padding-bottom:20px;
}
.grey-text {
    font-size:14px;
    color:#999;
}
.ar-rating-title {
    font-size:16px;
}
.ar-mb10 {
    margin-bottom:10px;
}
.ar-tag {
    padding:10px;
    background-color:#f3f3f3;
    border:1px solid #ddd;
    margin:5px;
    font-size:14px;
}
.ar-tag-selected {
    background-color:#f2c7c7 !important;
    border:1px solid #d63333 !important;
    margin:5px;
    padding:10px;
}
.scrolling-text {
    white-space:nowrap;
    overflow:hidden;
    line-height:28px;
}
.ellipsis {
    text-overflow:ellipsis;
}
.not-found-text {
    height:60%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    font-size:18px;
    padding:30px;
    text-align:center;
    font-family:OpenSans;
}
.arsitag-color {
    color:#ED3F23;
    font-weight:700;
}

@media screen and (min-width:451px) {
    .ar-content {
        width:450px;
        margin:auto;
        height:700px;
    }
}

@media screen and (max-width:450px) {
    .ar-content {
        width:100%;
        min-width:400px;
        margin:auto;
        height:100%;
    }
}