@font-face
{
    font-family: 'GrotzecHdCn';
    src: url('fonts/Grotzec.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

@font-face
{
    font-family: 'ABCDiatype';
    src: url('fonts/ABCDiatype-Regular.woff2') format('woff2'), url('fonts/ABCDiatype-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'ABCDiatype';
    src: url('fonts/ABCDiatype-Bold.woff2') format('woff2'), url('fonts/ABCDiatype-Bold.woff') format('woff');
    font-weight: bold;
}


body {
    background-color: black;
    background-image: url('img/background.webp');
    background-attachment: fixed;
    background-repeat: no-repeat;
}

@media (max-width: 1920px) and (max-height: 1080px) {
    body {
        background-color: black;
        background-image: url('img/background-1920x1080.webp');
        background-attachment: fixed;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1080px) and (max-height: 1920px) {
    body {
        background-color: black;
        background-image: url('img/background-1080x1920.webp');
        background-attachment: fixed;
        background-repeat: no-repeat;
    }
}

/*
body {
    background-color: black;
    background-image: image-set(
            url('img/wt.webp') 1x
            url('img/wt@2x.webp') 2x
    );
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
}

@media (max-width: 1920px) and (max-height: 1080px) {
    body {
        background-color: black;
        background-image: image-set(
                url('img/wt-1920x1080.webp') 1x
                url('img/wt-1920x1080@2x.webp') 2x
        );
        background-attachment: fixed;
        background-repeat: no-repeat;
        min-height: 100vh;
    }
}

@media (max-width: 1080px) and (max-height: 1920px) {
    body {
        background-color: black;
        background-image: image-set(
                url('img/wt-1080x1920.webp') 1x
                url('img/wt-1080x1920@2x.webp') 2x
        );
        background-attachment: fixed;
        background-repeat: no-repeat;
        min-height: 100vh;
    }
}*/

.tr-widget {
    display: block;
    max-width: 400px;
    margin-left: 21px;
    background-color: #1B1A1A;
    border-radius: 20px;
}

.tr-center {
    margin-left: auto;
    margin-right: auto;
}

#am_logo_obj {
    /*width: 125px;
    height: 19.53px;
    margin-top: 19px;
    margin-bottom: 46px;
    */
    width: 150px;
    margin-top: 35px;
    margin-left: 20px;
    margin-bottom: 25px;
}

#transmitter_widget {
    /*width: max-content;*/
}

#sess_name {
    margin-left: 25px;
    width: calc(100% - 50px);
    height: 40px;
    border-radius: 30px;
    /*border-color: white;*/
    border-width: 0px;
    border-style: solid;
    background: #303030 url('img/pencil_white.svg') no-repeat left 12px center;
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-weight: bold;
    font-size: 14px;
    padding-left: 40px;
    padding-right: 6px;
    text-align: center;
    color: white;
}

#sess_name:disabled {
    color: #999999;
    border-color: #999999;
    background: #303030 url('img/pencil_grey.svg') no-repeat left 12px center;
}

#latency_lbl_row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-left: 26px;
}

#quality_lbl_row {
    display: flex;
    justify-content: space-evenly;
    margin-left: 26px;
}

.tr-cl2 {
    width: 50%;
}

#tr_input_device_block {
    margin-top: 32px;
}

#transmitter_dev_list {
    /*width: 349px;*/
    margin-top: 10px;
    margin-left: 26px;
    display: block;
}
#tr_device_name_btn {
    width: 349px;
    padding-left: 35px;
    padding-right: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 50px 50px 50px 50px;
    border-width: 0px;
    /*border-color: white;*/
    background: #303030;
    background-image: url('img/dropdown_white.svg');
    background-position: right 10px top 50%;
    background-repeat: no-repeat;
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #BBBBBB;
}

#monitor_section {
    margin-top: 32px;
}

#monitor_dev_list {
    /*width: 349px;*/
    margin-top: 10px;
    margin-left: 26px;
    display: block;
}

#mn_device_name_btn {
    width: 349px;
    padding-left: 35px;
    padding-right: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 50px 50px 50px 50px;
    border-width: 0px;
    /*border-color: white;*/
    background: #303030;
    background-image: url('img/dropdown_white.svg');
    background-position: right 10px top 50%;
    background-repeat: no-repeat;
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #BBBBBB;
}

.dp-cl-0 {
    display: inline-block;
    pointer-events: none;
    min-width: 14px;
    min-height: 14px;
    vertical-align: top;
    padding-top: 5px;
}

.dp-cl-1 {
    display: inline-block;
    min-width: 12px;
    margin-left: 3px;
    vertical-align: top;
}

.dp-cl-2 {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dp-img-selected {
    opacity: 100%;
}

.dp-img-regular {
    opacity: 20%;
}

.dp-img-regular:active:hover{
    opacity: 50%;
}

.dp-selected {
    color: black;
}
.dp-regular {
    color: #555555;
}

#transmitter_play_file {
    margin-left: 26px;
    margin-right: 15px;
    margin-top: 18px;
    /*margin-bottom: 36px;*/
    background: transparent;
    border: 0px;
}

#transmitter_play_file_loop
{
    margin-left: 26px;
    margin-right: 15px;
    border: 0;
    background-color: transparent;
    margin-top: 10px;
}

#transmitter_file_drop_area {
    position: relative;
    margin-top: 20px;
    width: 287px;
    height: 66px;
    background-color: #303030;
    border-radius: 10px;
}

#transmitter_file_drop_text {

    text-align: center;
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
    user-select: none;
    position: absolute;
    padding-top: 1.8em;
    width: 100%;
    color: #BBBBBB;
    z-index: 3;
    /*padding-left: 90px;*/
}

.transmitter_file_drop_text_bg_img {
    background: transparent url("img/dnd.svg") no-repeat left 70px top 1.85em;
}

.transmitter_file_drop_text_no_support {
    color: black !important;
}

#transmitter_file_name {
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 10px;
    color: black;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 287px;
}

#transmitter_file_start {
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    color: rgba(153, 153, 153, 1);
}

#transmitter_file_cur {
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    color: rgba(255, 193, 48, 1);
}

#transmitter_file_length {
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    color: rgba(153, 153, 153, 1);
}

#transmitter_file_player {
    visibility: hidden;
}

#monitor_volume_row {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

#monitor_volume_lbl {
    margin-left: 26px;
}

#monitor_volume_cnv {
    width: 136px;
    height: 17px;
    cursor: grab;
    margin-right: 28px;
    border-radius: 10px;
}

#transmitter_volume_row {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}

#transmitter_volume_lbl {
    margin-left: 26px;
}

#transmitter_volume_cnv {
    width: 136px;
    height: 17px;
    cursor: grab;
    margin-right: 28px;
    border-radius: 10px;
}

#tr_meter_container {
    margin-top: 20px;
    margin-left: 26px;
    margin-right: 26px;
}


.tr-btn {
    border-radius: 30px;
    font-family: "GrotzecHdCn", sans-serif;
    font-size: 18px;
    border: 0px;
    padding: 5px 26px;
}
.tr-lbl {
    font-family: "ABCDiatype", "Arial", sans-serif;
    color: white;
}

.tr-lbl-12 {
    font-family: "ABCDiatype", "Arial", sans-serif;
    color: #545151;
    font-size: 12px;
}

.tr-lbl-12-grey {
    font-family: "ABCDiatype", "Arial", sans-serif;
    color: #999999;
    font-size: 12px;
}

.tr-lbl-12-bold-grey {
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-weight: bold;
    color: #999999;
    font-size: 12px;
}

.tr-lbl-10-grey {
    font-family: "ABCDiatype", "Arial", sans-serif;
    color: #999999;
    font-size: 10px;
}

.tr-lbl-10-white {
    font-family: "ABCDiatype", "Arial", sans-serif;
    color: white;
    font-size: 10px;
}

.tr-lbl-right {
    text-align: right;
}

.tr-white {
    color: white;
}

.tr-btn-link {
    text-decoration: underline;
    background-color: transparent;
    border: 0px;
}

.tr-sect-hdr {
    border-radius: 5px;
    width: 350px;
    height: 17px;
    font-size: 10px;
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-weight: bold;
    color: black;
    text-align: center;
    padding-top: 2px;
    margin-left: auto;
    margin-right: auto;
}

.tr-sect-hdr-yellow {
    color: #FFC738;
}

.tr-sect-hdr-green {
    color: #3EAF3F;
}


#listeners_limit_reached {
    margin: 32px 26px 16px;
    display: none;
    border-radius: 10px;
    background: #FEB686;
    text-align: left;
    padding-left: 32px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 14px;
    color: black;
}

#con_clients_row {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

#con_clients_row > :first-child {
    margin-left: 26px;
}

#con_clients_row > :last-child {
    margin-right: 26px;
}

.streaming_btn {
    height: 30px;
    width: 160px;
    color: white;
    border-radius: 30px;
    border-width: 0px;
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    margin-left: 26px;
    padding-left: 18px;
    margin-top: 10px;
}

.start_streaming {
    background: #1F7040 url('img/streaming_start.svg') no-repeat left 6px center;
}

.stop_streaming {       /*same button as start streaming but when the streaming is happening and you want to stop it*/
    background: #FF5E03 url('img/streaming_stop.svg') no-repeat left 6px center;
}

#share_link {
    background: #303030 url('img/share.svg') no-repeat left 6px center;
    height: 30px;
    width: 90px;
    color: white;
    border-radius: 30px;
    border-width: 0px;
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    margin-left: 2px;
    padding-left: 20px;
}

#share_link:active {
    background-color: #00D2C6;
}


#copy_link {
    background: #303030 url('img/copy.svg') no-repeat left 6px center;
    height: 30px;
    width: 90px;
    color: white;
    border-radius: 30px;
    border-width: 0px;
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    margin-left: 2px;
    padding-left: 20px;
}

#copy_link:active {
    background-color: #00D2C6;
}

#tr_user_row {
    margin-right: 26px;
}

#tr_user_name {
    margin-left: 26px;
}

#logout {
    background: transparent url('img/logout.svg') no-repeat left center;
    padding-left: 15px;
    /*float: right;*/
    margin-bottom: 10px;
}

/*pseudo-login screen*/
#login_required_widget {
    display: none;
}

#login_required_text {
    padding-top: 128px;
    /*font-size: 18px;*/
    text-align: center;
}

#login_button {
    margin-top: 25px;
    display: block;
    text-align: center;
    background-color: white;
    color: black;
    border: 0px;
    margin-left: auto;
    margin-right: auto;
}

#login_sign_up {
    display: block;
    margin-top: 271px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#no_license_widget {
    display: none;
}

#no_license_text {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 60px;
    line-height: 2;
}

#my_products_button {
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#logout_button {
    display: block;
    margin-top: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#session_settings_button {
    font-family: "ABCDiatype", "Arial", sans-serif;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-decoration: underline;
    background-color: transparent;
    border: 0px;
    margin-left: 22px;
    margin-top: 25px;
}

.setting-dialog-class {
    width: 284px;
    margin-left: 80px;
    margin-top: 199px;
}

.setting-dialog-class .modal-content {
    border-radius: 10px;
    background-color: #1B1A1A;
    box-shadow: 0px 0px 10px #00C5F0;
}

.setting-modal-header {
    border-bottom: 0px;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
}
.setting-modal-header .modal-title {
    /*margin-left: -5px;
    margin-right: -5px;*/
    width: 264px;
    border-radius: 5px;
    background-color: #00C5F0;
    color: black;
    text-align: center;
    font-family: 'ABCDiatype', "Arial", sans-serif;
    font-size: 10px;
    font-weight: bold;
}

.settings-lbl {
    display: block;
    text-align: center;
    font-family: 'ABCDiatype', "Arial", sans-serif;
    font-size: 10px;
    color: #999999;
    margin-top: 10px;
    margin-bottom: 6px;
}

.setting-dialog-class .modal-body {
    padding-top: 0px;
}

.setting-dialog-class .btn-primary {
    height: 25px;
    border-radius: 20px;
    /*border: 2px solid #545151;*/
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    padding: 2px 32px;
    background-color: white;
    margin-top: 10px;
    color: black;
}


#session_password_info {
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    color: #E10006;
    margin-left: 75px;
    visibility: hidden;
}

.tr-settings-row-0 {
    display: flex;
    justify-content: space-around;
}

.tr-settings-row-1 {
    display: flex;
    justify-content: center;
}

.settings-dropdown {
    background: #303030;
    /*border: 2px solid #000000;*/
    padding-left: 5px;
    padding-right: 37px;
    border-radius: 20px;
    border-width: 0;
    text-align: center;
    /*padding: 10px;*/
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 10px;
    appearance: none;
    color: #999999;
    background-image: url('img/dropdown_white.svg');
    background-position: right 10px top 50%;
    background-repeat: no-repeat;
}

/*it doesn't work but if it starts one day*/
.settings-dropdown option {
    text-align: right;
}

#latency {
    width: 129px;
    margin-right: 5px;
    height: 32px;
}
#encoder {
    width: 129px;
    margin-left: 5px;
    height: 32px;
}

#transmitter_sess_password {
    width: 166px;
    height: 28px;
    padding-left: 20px;
    border-radius: 20px;
    border: 0px;
    color: #999999;
    text-align: center;
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 12px;
    background: #303030;
}

.sess_password_checkbox_cursor {
    cursor: pointer;
}

.sess_password_checkbox_on {
    background: #303030 url('img/password_on.svg') no-repeat left 6px center !important;
}

.sess_password_checkbox_off {
    background: #303030 url('img/password_off.svg') no-repeat left 6px center !important;
}

.share_link_dialog_dialog {
    max-width: 300px;
    margin-left: 80px;
    margin-top: 120px;
}

.share_link_dialog_content {
    background: #1B1A1A;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #00C5F0;
}

#share_link_dialog_close {
    position: absolute;
    left: 4px;
    top: 4px;
    border: 0px;
}

#share_link_dialog_header {
    background-color: #FEB686;
    /*margin-left: 10px;*/
    /*margin-right: 10px;*/
    border-radius: 5px;
    margin-top: -6px;
    margin-left: -6px;
    margin-right: -6px;

}

#share_link_dialog_link {
    font-size: 8px;
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
}

#share_link_dialog_name {
    padding-top: 1px;
    font-family: "ABCDiatype", "Arial", sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: black;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#share_link_dialog_email {
    border-radius: 15px;
    border: 1px solid rgba(95, 99, 104, 0.3);
    background: white url('img/email.svg') no-repeat left 6px center;
    padding-left: 29px;
    margin-top: 15px;
    width: 279px;
    height: 29px;
    font-size: 10px;
    font-family: "ABCDiatype", "Arial", sans-serif;
}

#share_link_dialog_email:invalid {
    border: 3px solid red;
    color: red;
}

.share_link_button{
    border-radius: 15px;
    padding-left: 29px;
    padding-right: 15px;
    border: 0;
    margin-top: 6px;
    height: 29px;
    font-size: 10px;
    font-family: "ABCDiatype", "Arial", sans-serif;
}

.share_link_button:disabled {
    color: grey;
}

#share_link_dialog_send_email {
    background: white url('img/share_send_email.svg') no-repeat left 6px center;
}

#share_link_dialog_copy_link {
    background: white url('img/copy_black.svg') no-repeat left 6px center;
}