﻿@font-face {
    font-family: 'InstrumentSans';
    src: url('../fonts/InstrumentSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'InstrumentSans';
    src: url('../fonts/InstrumentSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'InstrumentSans';
    src: url('../fonts/InstrumentSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'InstrumentSans';
    src: url('../fonts/InstrumentSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'InstrumentSans','InstrumentSans';
}

p, span, label, a, tr, td {
    font-family: 'InstrumentSans','InstrumentSans';
}

div {
    font-family: 'InstrumentSans','InstrumentSans';
}


/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.lang-toggle {
    position: relative;
    display: inline-flex;
    background: #ffffff;
    border-radius: 30px;
    padding: 4px;
    width: 120px;
}

.lang-btn {
    flex: 1;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 500;
    text-decoration: none;
    color: #555;
    z-index: 2;
    border-radius: 30px;
    height: 32px; 
}

    .lang-btn.active {
        color: #fff;
    }

.lang-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: 32px; 
    background: #1e88e5;
    border-radius: 30px;
    transition: left 0.3s ease;
}

.lang-toggle.th-active .lang-slider {
    left: calc(50% + 0px);
}