/* widget_SWNovaSorterComponent.css */
/*------------------SORTER STYLE------------------*/

#attendedMainContainer .sw-sorter-container{
    display: flex;
    width: 100%;
    height: 30px;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    position: relative;
    min-width: 105px;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-box{
    flex: 1 1 auto;
    display: flex;
    cursor: pointer;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-box:hover{
    background-color: #f3f3f3;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-box .sw-sorter-sort-direction-arrow{
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1081af;
    font-size: 14px;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-box .sw-sorter-value{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px;
  user-select: none;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-arrow{
    width: 30px;
    border-left: 1px solid #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1081af;
    cursor: pointer;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-arrow:hover{
    background-color: #f3f3f3;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-drop-container{
    position: absolute;
    width: 100%;
    background-color: white;
    top: 29px;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-flow: column;
    z-index: 99;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-drop-container.hidden{
    display: none;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-drop-container .sw-sorter-drop-elem{
    padding: 10px;
    font-size: 13px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    cursor: pointer;
    user-select: none;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-drop-container .sw-sorter-drop-elem:hover{
    background-color: #f2f2f2;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-drop-container .sw-sorter-drop-elem.selected{
    background-color: #e5f9fa;
    font-weight: 700;
}


#attendedMainContainer .sw-sorter-container .sw-sorter-drop-container .sw-sorter-drop-elem.selected:hover{
    background-color: #d9f6f8;
}
/* widget_SWNovaComboBoxComponent.css */
/*------------------SORTER STYLE------------------*/
#attendedMainContainer div.sw-combo-box-container{
    display: flex;
    width: 100%;
    height: 30px;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    position: relative;
    min-width: 160px;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box{
    flex: 1 1 auto;
    display: flex;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box:hover{
    background-color: #f3f3f3;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box .sw-combo-box-value{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px;
  user-select: none;
  padding-left: 8px;
  width: 100%;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box .sw-combo-box-value.placeholder{
    color: #949494;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box-arrow{
    width: 30px;
    border-left: 1px solid #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1081af;
    cursor: pointer;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box-arrow:hover{
    background-color: #f3f3f3;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box-drop-container{
    position: absolute;
    width: 100%;
    background-color: white;
    top: 29px;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-flow: column;
    max-height: 300px;
    overflow-y: auto;
    z-index: 99;
    text-align: left;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box-drop-container.hidden{
    display: none;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box-drop-container .sw-combo-box-drop-title-elem{
    text-transform: uppercase;
    font-size: 11px;
    color: #9e9d9d;
    font-weight: 600;
    padding: 7px 10px 5px 10px;
    border-top: 1px solid #D5D5D5;
    cursor: default;
    user-select: none;
    word-break: break-word;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box-drop-container .sw-combo-box-drop-title-elem:first-child{
    border-top: 1px solid white;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box-drop-container .sw-combo-box-drop-elem{
    padding: 5px 10px;
    font-size: 13px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    cursor: pointer;
    user-select: none;
    word-break: break-word;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box-drop-container .sw-combo-box-drop-elem:hover{
    background-color: #f2f2f2;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box-drop-container .sw-combo-box-drop-elem.selected{
    background-color: #e5f9fa;
    font-weight: 700;
}

#attendedMainContainer div.sw-combo-box-container .sw-combo-box-drop-container .sw-combo-box-drop-elem.selected:hover{
    background-color: #d9f6f8;
}
/* widget_SWNovaSearchComponent.css */
#attendedMainContainer div.search {
    position: relative;
    width: 100%;
    max-width: 400px;
    min-width: 180px;
    border: 0.5px solid #D5D5D5;
    height: 30px;
    border-radius: 3px;
    background-color: #FFFFFF;
    /*box-shadow: inset 0px 0.5px 1px 0px rgba(51, 51, 51, 0.3);*/
}
#attendedMainContainer div.search:hover {
    border-color: #999999;
}
#attendedMainContainer div.search.focused {
    border-color: #006F9D;
}
#attendedMainContainer div.search input, #attendedMainContainer div.search input:focus {
    float: left;
    font-family: "Open Sans";
    font-size: 13px;
    color: #111111;
    line-height: 16px;
    text-align: left;
    width: calc(100% - 80px);
    height: 100%;
    border: none;
    margin-left: 10px;
    background: none;
    outline: none;
}
#attendedMainContainer div.search input::selection {
    background: rgba(192, 70, 255, 0.15);
}
#attendedMainContainer div.search > #attendedMainContainer div.searchSubmit, #attendedMainContainer div.search > #attendedMainContainer div.searchReset {
    position: absolute;
    font-size: 16px;
    width: 30px;
    height: 28px;
}
#attendedMainContainer div.search.active > #attendedMainContainer div.searchSubmit:hover, #attendedMainContainer div.search.active > #attendedMainContainer div.searchReset:hover {
    background: rgba(17, 17, 17, 0.05);
    cursor: pointer;
}
#attendedMainContainer div.search > #attendedMainContainer div.searchSubmit {
    right: 0px;
}
#attendedMainContainer div.search > #attendedMainContainer div.searchReset {
    display: none;
    right: 30px;
    border-right: 1px #D5D5D5 solid;
}
#attendedMainContainer div.search.active > #attendedMainContainer div.searchReset {
    display: block;
}
#attendedMainContainer div.search i {
    position: absolute;
    top: 22%;
    left: 25%;
    color: #878787
}
#attendedMainContainer div.search.active i {
    color: #0079AA;
}
span.searchhighlight {
    background-color: rgba(249, 157, 28, 0.3);
}
/* widget_TakeControlAttendedMainStyle.css */
.inner-widget-container {
    position: absolute;
    right: -10px;
    top: 57px;
    line-height: normal;
    white-space: normal;
}
#attendedMainContainer *{
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box; 
    font-family: 'Open Sans', sans-serif;
}
#attendedMainContainer #componentContainer{
    width: 400px;
    height: 83vh;
    display: flex;
    flex-flow: column;
    border-radius: 2px;
    z-index: 99;
    margin-left: 5px;
    position: relative;
    color: #111;
    text-align: left;
    cursor: default;
}
#attendedMainContainer #componentContainer .component-container-body{
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.12);
    background-color: white;
    position: relative;
}
#attendedMainContainer #componentContainer .component-header{
    border-bottom: 1px solid #D5D5D5;
    display: flex;
    flex-flow: column;
}
#attendedMainContainer #componentContainer .component-header.no-licenses{
    border: none;
    margin-bottom: -10px;
}
#attendedMainContainer #componentContainer .component-header .title-container .back-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 5px;
    color: #0079aa;
    cursor: pointer;
    width: 28px;
    border-radius: 3px;
}
#attendedMainContainer #componentContainer .component-header .title-container .back-arrow:hover{
    background-color: #f2f2f2;
}
#attendedMainContainer #componentContainer .component-header .title-container .back-arrow.hidden{
    display: none;
}
#attendedMainContainer #componentContainer .component-header .title-container{
    width: 100%;
    display: flex;
    padding: 5px;
    position: relative;
}
#attendedMainContainer #componentContainer .component-header .title-container .title{
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    flex: 1 1 auto;
    padding-left: 5px;
    user-select: none;    
    flex: 1 1 100%;
}
#attendedMainContainer #componentContainer .component-header .title-container .title.sub-title {
    justify-content: end;
    font-size: 12px;
}
#attendedMainContainer #componentContainer .component-header .title-container .three-dot-menu-btn{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px;
    color: #0079aa;
    border-radius: 3px;
    cursor: pointer;
}
#attendedMainContainer #componentContainer .component-header .title-container .three-dot-menu-btn:hover{
    background-color: #f2f2f2;
}
#attendedMainContainer #componentContainer .component-header .title-container .three-dot-menu-container{
    position: absolute;
    background-color: white;
    right: 5px;
    top: 32px;
    min-width: 130px;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-flow: column;
    z-index: 99;
}
#attendedMainContainer #componentContainer .component-header .title-container .three-dot-menu-container.hidden{
    display: none;
}
#attendedMainContainer #componentContainer .component-header .title-container .three-dot-menu-container .menu-item{
    color: #0079aa;
    padding: 10px;
    font-size: 13px;
    display: flex;
    cursor: pointer;
    user-select: none;
}
#attendedMainContainer #componentContainer .component-header .title-container .three-dot-menu-container .menu-item:hover{
    background-color: #f2f2f2;
}
#attendedMainContainer #componentContainer .component-header .toggle-license-container{
    width: 100%;
    display: flex;
    justify-content: center;
}
#attendedMainContainer #componentContainer .component-header .toggle-license-container.hidden{
    display: none;
}
#attendedMainContainer #componentContainer .component-header .toggle-license-container .toggle-container{
    flex: 1 1 auto;
    display: flex;
    height: 100%;
    align-items: center;
    padding: 5px 0px 10px 10px;
}
#attendedMainContainer #componentContainer .component-header .toggle-license-container .toggle-container .toggle-label{
    font-size: 13px;
    font-weight: 600;
    padding-left: 5px;
    user-select: none;
    padding-bottom: 5px;
}

/*-------------------START TOGGLE-------------------*/
#attendedMainContainer #componentContainer .component-header .toggle-license-container .toggle-container .tgl-btn .check_icon{
    position: absolute;
    bottom: 5px;
    left: 7px;
    font-size: 10px;
    font-weight: 600;
}

.tgl{
    display: none;
}

.tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 40px;
    height: 20px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tgl-light + .tgl-btn {
    background: #8c8c8c;
    color: #8c8c8c;
    border-radius: 2em;
    padding: 2px;
    transition: all .2s ease;
}

.tgl-light:checked + .tgl-btn {
    background: #00a753;
    color: white !important;
}

.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 14px;
    height: 14px;
}

.tgl + .tgl-btn:after {
    left: 2px;
    bottom: 13px;
}

.tgl-light + .tgl-btn:after {
    border-radius: 50%;
    background: #fff;
    transition: all .2s ease;
}

.tgl:checked + .tgl-btn:after {
    left: 55%;
    bottom: 13px;
}
#attendedMainContainer #componentContainer .component-header .toggle-license-container .toggle-container .toggle .switch .slider.round{
    border-radius: 34px;
}
#attendedMainContainer #componentContainer .component-header .toggle-license-container .toggle-container .toggle .switch .slider.round:before{
    border-radius: 50%;  
}

/*-------------------END TOGGLE-------------------*/
#attendedMainContainer #componentContainer .component-header .toggle-license-container #attendedLicencesCounter{
    display: flex;
    padding-bottom: 10px;
}
#attendedMainContainer #componentContainer .component-header .toggle-license-container #attendedLicencesCounter .licenses-full-icon{
    height: 100%;
    color: #dd2c00;
    display: flex;
    align-items: center;
    padding-right: 5px;
}
#attendedMainContainer #componentContainer .component-header .toggle-license-container #attendedLicencesCounter .licenses-counter{
    height: 100%;
    align-items: center;
    font-size: 13px;
    display: flex;
    justify-content: flex-end;
    padding-right: 10px; 
    user-select: none;
}
#attendedMainContainer #componentContainer .component-header .toggle-license-container #attendedLicencesCounter .licenses-counter .licences-num{
    font-weight: 600;
}
#attendedMainContainer #componentContainer .component-background{
    flex: 1 1 auto;
    /*background-color: #f0f0f0;*/
}

#componentBody.hidden{
    display: none;
} 

#componentBody .component-body-content-disabled{
    font-size: 13px;
    padding: 15px;
}

#componentBody .body-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
}

#componentBody .body-container .tab-bar-container{
    height: 45px;
    width: 100%;
    display: flex;
    border-bottom: 1px solid #D5D5D5;
}

#componentBody .body-container .tab-bar-container.no-licenses{
    height: unset;
}

#componentBody .body-container .tab-bar-container .tab{
    height: 100%;
    font-size: 13px;
    font-weight: 600;
    padding: 15px;
    display: flex;
    align-items: center;
    color: #707070;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

#componentBody .body-container .tab-bar-container .tab:hover{
    background-color: #ededed;
}

#componentBody .body-container .tab-bar-container .tab.active{
    color: #111;
    border-bottom: 3px solid #C046FF;
    padding-bottom: 14px;
    height: 45px;
}

#componentBody .body-container .tab-bar-container .tab.hidden{
    display: none;
}

#componentBody .body-container .body-content-container{
    padding-bottom: 10px;
}

/*-------------------START BUTTONS CLASS-------------------*/
.tc-attended-button{
    min-width: 75px;
    max-width: 130px;
    height: 30px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    color: #0079aa;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    margin-left: 5px;
    margin-right: 5px;
}

.tc-attended-button.primary{
    background-color: #0079aa;
    color: white;
    border: 1px solid #0079aa;
}

.tc-attended-button.red{
    color: #dd2c00;
}

/*-------------------END BUTTONS CLASS-------------------*/

/*-------------------CREATE SESSION BODY-------------------*/
#createSessionContainer{
    width: 100%;
    display: flex;
    padding: 10px;
    flex-flow: column;
}

#createSessionContainer #createSessionBtn{
    margin-left: 0px;
}

#createSessionContainer.hidden{
    display: none;
}

#createSessionContainer .queue-container{
    display: flex;
    flex-flow: column;
    width: 100%;
    padding-bottom: 10px;
}

#createSessionContainer .queue-container .widget-label{
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    user-select: none;
}

#departmentsQueue{
    width: 100%;
    height: 32px;
    padding: 5px;
    border: 1px solid #d5d5d5;
    border-radius: 2px;
}

#createSessionContainer .session-button-container{
    width: 100%;
    display: flex;
    /*margin-top: -10px;*/
}

#createSessionContainer .pin-content-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
}

#createSessionContainer .pin-content-container .pin-code-container{
    width: 100%;
    display: flex;
    flex-flow: column;
    padding-top: 10px;
}

#createSessionContainer .pin-content-container .pin-code-container .widget-label{
    font-size: 13px;
    font-weight: 600;
    padding-top: 10px;
    user-select: none;
}

#createSessionContainer .pin-content-container .pin-code-container .pin-code{
    font-size: 16px;
    font-weight: 600;
    padding-top: 2px;
    user-select: all;
}

#createSessionContainer .pin-content-container .pin-code-container .pin-code-grey-text{
    font-size: 12px;
    padding-top: 6px;
    color: #828282;
    user-select: none;
}

#createSessionContainer .pin-content-container .pin-code-container .pin-code-url{
    font-size: 12px;
}

#createSessionContainer .pin-content-container .url-container{
    width: 100%;
    display: flex;
    padding-top: 8px;
    padding-bottom: 3px;
}

#createSessionContainer .pin-content-container .url-container .text-container{
    flex: 1 1 auto;
    height: 51px;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

#createSessionContainer .pin-content-container .url-container .text-container .widget-label{
    font-size: 13px;
    font-weight: 600;
    user-select: none;
}

#createSessionContainer .pin-content-container .url-container .text-container .url{
    font-size: 12px;
    user-select: all;
}

#createSessionContainer .pin-content-container .url-container .text-container .url-grey-text{
    font-size: 12px;
    color: #828282;
    user-select: none;
}

#createSessionContainer .pin-content-container .url-container .copy-url-icon-container{
    /*flex: 1 1 auto;*/
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

#createSessionContainer .pin-content-container .url-container .copy-url-icon-container .ic{
    color: #0079aa;
    cursor: pointer;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
}

#createSessionContainer .pin-content-container .url-container .copy-url-icon-container .ic:hover{
    background-color: #f3f3f3;
}

#createSessionContainer .pin-content-container .url-container .copy-url-icon-container .tooltip-wrapper{
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

#createSessionContainer .pin-content-container .url-container .copy-url-icon-container .tooltip-wrapper.hidden{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s ease-out;
}

#createSessionContainer .pin-content-container .url-container .copy-url-icon-container .tooltip-wrapper .tooltip{
    background-color: #111111;
    color: #fff;
    text-align: center;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 12px;
    left: -55px;
    font-size: 10px;
    font-weight: 200;
    user-select: none;
    width: 47px;
    opacity: 1;
}

#createSessionContainer .pin-content-container .url-container .copy-url-icon-container .tooltip-wrapper .tooltip-arrow{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 7px 0px 7px;
    border-color: #111111 transparent transparent transparent;
    position: absolute;
    bottom: 20px;
    right: 28px;
    z-index: 1;
    transform: rotate(-90deg);
}


@media not all and (min-resolution:.001dpcm){ @supports (-webkit-appearance:none) { 
    #createSessionContainer .pin-content-container .url-container .copy-url-icon-container .tooltip-wrapper .tooltip{
        bottom: 11px;
        left: -55px; 
    }

    #createSessionContainer .pin-content-container .url-container .copy-url-icon-container .tooltip-wrapper .tooltip-arrow{
        bottom: 20px;
        right: 28px;
    } 
}}

/*-------------------START TOOLBAR-------------------*/

.tc-attended-tool-bar-container{
    height: 40px;
    border-bottom: 1px solid #D5D5D5;
    display: flex;
    padding: 4px 5px;
}

.tc-attended-tool-bar-container .filter-container .filter-button:hover{
    background-color: rgba(17, 17, 17, 0.05);
}

.tc-attended-tool-bar-container .sort-container{
    height: 100%;
    flex: 1 1 auto;
    padding-left: 5px;
    padding-right: 5px;
}

.tc-attended-tool-bar-container .search-container{
    height: 100%;
    /*flex: 1 1 auto;*/
    padding-left: 5px;
    padding-right: 5px;
}   

/*-------------------END TOOLBAR-------------------*/

/*-------------------REQUESTS BODY-------------------*/
#requestsContainer{
    display: flex;
    flex-flow: column;
    width: 100%;
}

#requestsContainer.hidden{
    display: none;
}

#requestsContainer img{
    width: 200px;
    height: 150px;
}

#requestsContainer #attendedRequestsListContainer{
    max-height: 60vh;
    display: flex;
    flex-flow: column;
    overflow-y: auto;
}

#requestsContainer #attendedRequestsListContainer .request-container{
    border-bottom: 1px solid #d5d5d5;
    width: 100%;
    display: flex;
    flex-flow: row;
    padding: 10px;
    /*position: relative;*/
}

#requestsContainer #attendedRequestsListContainer .request-container.hidden{
    display: none;
}

#requestsContainer #attendedRequestsListContainer .request-container .request-urgent-container{
    color: #0079aa;
    padding-right: 10px;
    position: relative;
}

#requestsContainer #attendedRequestsListContainer .request-container .request-urgent-container span.red{
    color: #dd2c00; 
}

#requestsContainer #attendedRequestsListContainer .request-container .request-urgent-container span.can-reject::before{
    cursor: pointer;
}

#requestsContainer #attendedRequestsListContainer .request-container .request-urgent-container .tooltip-wrapper{
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

#requestsContainer #attendedRequestsListContainer .request-container .request-urgent-container .tooltip-wrapper.hidden{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s ease-out;
}

#requestsContainer #attendedRequestsListContainer .request-container .request-urgent-container .tooltip-wrapper .tooltip{
    background-color: #111111;
    color: #fff;
    text-align: center;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: -4px;
    left: 22px;
    font-size: 10px;
    font-weight: 200;
    user-select: none;
    white-space: nowrap;
}

#requestsContainer #attendedRequestsListContainer .request-container .request-urgent-container .tooltip-wrapper .tooltip-arrow{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 7px 0px 7px;
    border-color: #111111 transparent transparent transparent;
    position: absolute;
    top: 4px;
    left: 12px;
    z-index: 1;
    transform: rotate(90deg);
}

#requestsContainer #attendedRequestsListContainer .request-container .request-section{
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
}

#requestsContainer #attendedRequestsListContainer .request-container .request-section.text-overflow{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis"!!
}

#requestsContainer #attendedRequestsListContainer .request-container .request-section .request-id{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    font-size: 11px;
    font-weight: 600;
    padding-bottom: 5px; 
}

#requestsContainer #attendedRequestsListContainer .request-container .request-section .request-name{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    font-size: 13px;
    font-weight: 600;
    padding-bottom: 5px;
    cursor: default;
}

#requestsContainer #attendedRequestsListContainer .request-container .request-section .request-queue{
    flex: 1 1 auto;
    font-size: 13px;
    color: #9c9c9c;
    user-select: none;
}

#requestsContainer #attendedRequestsListContainer .request-container .request-section .request-queue::first-letter{
    text-transform: uppercase;
}

#requestsContainer #attendedRequestsListContainer .request-container .request-section .request-time{
    display: flex;
    justify-content: flex-end;
    font-size: 11px;
    font-weight: 600;
    padding-bottom: 5px;
    user-select: none;
}

#requestsContainer #attendedRequestsListContainer .request-container .request-section .request-btns-container{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/*-------------------START ATTENDED BUTTON-------------------*/
.tc-attended-square-btn{
    width: 30px;
    height: 30px;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    margin-left: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.tc-attended-square-btn:hover{
    background-color: #f3f3f3;
}

.tc-attended-square-btn.blue{
    color: #0079aa;
}

.tc-attended-square-btn.red{
    color: #dd2c00;
}

.tc-attended-square-btn.green{
    color: #00a753;
}

/*-------------------END ATTENDED BUTTON-------------------*/

/*-------------------LICENCES BODY-------------------*/
#licencesContainer{
    display: flex;
    flex-flow: column;
    width: 100%;
}

#licencesContainer.hidden{
    display: none;
}

#licencesContainer #attendedRequestsLicensesContainer{
    max-height: 60vh;
    display: flex;
    flex-flow: column;
    overflow-y: auto;
}

#licencesContainer #attendedRequestsLicensesContainer .license-container{
    border-bottom: 1px solid #d5d5d5;
    width: 100%;
    display: flex;
    flex-flow: row;
    padding: 10px;
    position: relative;
    height: 75px;
}

#licencesContainer #attendedRequestsLicensesContainer .license-container .license-icon-status-container{
    display: flex;
    padding-right: 10px;
    font-size: 14px;
}

#licencesContainer #attendedRequestsLicensesContainer .license-container .license-icon-status-container.green{
    color: #00a753;
}

#licencesContainer #attendedRequestsLicensesContainer .license-container .license-icon-status-container.yellow{
    color: #fec405;
}

#licencesContainer #attendedRequestsLicensesContainer .license-container .license-section{
    flex: 1 1 auto;   
    display: flex;
    flex-flow: column;
}

#licencesContainer #attendedRequestsLicensesContainer .license-container .license-section .license-name{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    font-size: 13px;
    font-weight: 600;
    padding-bottom: 5px;
}

#licencesContainer #attendedRequestsLicensesContainer .license-container .license-section .license-running-sessions{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    font-size: 13px;
    padding-bottom: 5px;
    user-select: none;
}

#licencesContainer #attendedRequestsLicensesContainer .license-container .license-section .license-running-sessions.green{
    color: #00a753;
    display: none;
}

#licencesContainer #attendedRequestsLicensesContainer .license-container .license-section .license-platform{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    font-size: 13px;
    color: #9c9c9c;
    user-select: none;
}

#licencesContainer #attendedRequestsLicensesContainer .license-container .license-section .license-time{
    display: flex;
    justify-content: flex-end;
    font-size: 11px;
    font-weight: 600;
    padding-bottom: 5px;
    user-select: none;
}

#licencesContainer #attendedRequestsLicensesContainer .license-container .license-section .license-btns-container{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/*-------------------EMPTY REQUESTS LIST-------------------*/

#requestsContainer .no-requests-container{
    height: 250px;
    width: 100%;
    background-color: white;
    display: flex;
    flex-flow: column;
    padding: 15px;
}

#requestsContainer .no-requests-container .image-container{
    display: flex;
    align-items: center;
    justify-content: center; 
}

#requestsContainer .no-requests-container .text-container{
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    align-items: center;
    user-select: none;
}

#requestsContainer .no-requests-container .text-container .top-text{
    font-weight: 600;
    font-size: 15px;
}

#requestsContainer .no-requests-container .text-container .bottom-text{
    font-size: 13px;
    color: #707070;
    padding-top: 2px;
}

/*confirm dialog*--------------------------------------------------*/
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.900);
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container.hidden{
    display: none;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body{
    display: flex;
    width: 90%; 
    max-width: 100%;
    max-height: 100%;
    flex-flow: column;
    background-color: white;
    padding: 20px;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body .msg-container{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    user-select: none;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body .msg-container .text{
    font-size: 13px;
    font-weight: 600;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body .msg-container .text.small{
    font-size: 12px;
    font-weight: 400;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body .msg-container .queue-dropdown-container{
    width: 350px;
    padding-top: 15px;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body .btns-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body .spinner-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body .spinner-container .spinner{
    animation: rotate 2s linear infinite;
    width: 45px;
    height: 45px;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body .spinner-container .spinner .path {
    stroke: #33d0db;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body .spinner-container .spinner .path-background{
    stroke: #e1e1e1;
    stroke-linecap: round;
}
 
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body.failed{
    display: flex;
    width: 100%; 
    max-height: 100%;
    flex-flow: column;
    background-color: #fff6d9;
    border: 1px solid #fec405;
    padding: 12px;
    user-select: none;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body.failed .title-container{
    width: 100%;
    display: flex;
    padding-bottom: 5px;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body.failed .title-container .icon{
    display: flex;
    color: #fec405;
    font-size: 17px;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body.failed .title-container .text-container{
    width: 100%;
    padding-left: 10px;
    font-size: 13px;
    font-weight: 600;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body.failed .body-container{
    width: 100%;
    display: flex;
    flex-flow: column;
    padding-left: 15px;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body.failed .body-container .body-text-link{
    display: flex;
    width: 100%;
    margin-top: -7px;
    padding-left: 25px;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body.failed .body-container .body-text-link .download-btn{
    font-size: 13px;
    padding-bottom: 10p;
    cursor: pointer;
    color: #0079aa; 
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body.failed .body-container .body-text{
    padding: 10px;
    font-size: 13px;
    display: flex;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body.failed .body-container .body-text .bullet{
    font-size: 7px;
    padding-top: 4px;
    padding-right: 10px;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body.failed .body-container .body-text a{
    display: contents;
    text-decoration: none;
    color: #0079aa;
}
#attendedMainContainer #componentContainer .component-container-body .component-dialog-container .dialog-body.failed .btns-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
}

/*no licences banner*--------------------------------------------------*/
#attendedMainContainer #componentContainer .banner-container{
    padding: 10px;
    background-color: white;
    width: 100%;
    height: 100%;
    user-select: none;
}
#attendedMainContainer #componentContainer .banner-container .banner-elem{
    width: 100%;
    background-color: #ddeef3;
    border: 1px solid #1c8eb1;
    display: flex;
    padding: 8px;
}
#attendedMainContainer #componentContainer .banner-container .banner-elem .icon-container{
    display: flex;
    color: #1c8eb1;
    padding-right: 8px;
}
#attendedMainContainer #componentContainer .banner-container .banner-elem .text-container{
    display: flex;
    flex-flow: column;
    margin-top: -2px;
}
#attendedMainContainer #componentContainer .banner-container .banner-elem .text-container .top{
    display: flex;
    font-size: 13px;
    font-weight: 600;
}
#attendedMainContainer #componentContainer .banner-container .banner-elem .text-container .bottom{
    display: flex;
    font-size: 13px;
}
#attendedMainContainer #componentContainer .banner-container .banner-elem .text-container .bottom-small{
    display: flex;
    font-size: 11px;
}

/*toaster notifications*--------------------------------------------------*/
#attendedMainContainer #componentContainer .toaster-wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center; 
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

#tcToasterContainer{
    width: 380px;
    pointer-events: auto;
    user-select: none;
}

.swnova-toaster-container {
    display: flex;
    position: fixed;
    /*padding: 5px;*/
    flex-flow: column;
    overflow: hidden;
    max-height: calc(100% - 70px);
    z-index: 1000;
}
.swnova-toaster-container.top-right {
    top: 60px;
    right: 10px;
    width: 450px;
}
.swnova-toaster-container.top-left {
    top: 60px;
    left: 10px;
    width: 450px;
}
.swnova-toaster-container.top-center {
    top: 60px;
    left: calc(50% - 225px);
    width: 450px;
}
.swnova-toaster-container.top-full {
    top: 60px;
    left: 10px;
    width: calc(100% - 20px);
}
.swnova-toaster-container.bottom-right {
    bottom: 10px;
    right: 10px;
    width: 450px;
}
.swnova-toaster-container.bottom-left {
    bottom: 10px;
    left: 10px;
    width: 450px;
}
.swnova-toaster-container.bottom-center {
    bottom: 10px;
    left: calc(50% - 225px);
    width: 450px;
}
.swnova-toaster-container.bottom-full {
    bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);
}

.swnova-toaster-container .swnova-toaster {
    height: auto;
    display: flex;
    z-index: 950;
    background: white;
    background-color: white !important;
    flex-flow: column;
    border: 1px solid;
    margin-bottom: 10px;
    flex: 1 0 auto;
    box-shadow: 0 0 5px 0 #a7a7a755;
}

.swnova-toaster-container .swnova-toaster.info,
.swnova-toaster-container .swnova-toaster.info > * {
    color: rgb(28, 142, 177);
    border-color: rgb(28, 142, 177);
    background-color: rgba(28, 142, 177, 0.1);
}
.swnova-toaster-container .swnova-toaster.success,
.swnova-toaster-container .swnova-toaster.success > * {
    color: rgb(0, 167, 83);
    border-color: rgb(0, 167, 83);
    background-color: rgba(0, 167, 83, 0.1);
}
.swnova-toaster-container .swnova-toaster.error,
.swnova-toaster-container .swnova-toaster.error > * {
    color: rgb(221, 44, 0);
    border-color: rgb(221, 44, 0);
    background-color: rgba(221, 44, 0, 0.1);
}
.swnova-toaster-container .swnova-toaster.warning,
.swnova-toaster-container .swnova-toaster.warning > * {
    color: rgb(254, 196, 5);
    border-color: rgb(254, 196, 5);
    background-color: rgba(254, 196, 5, 0.1);
}

.swnova-toaster-container .main-container {
    display: flex;
}

.swnova-toaster-container .message-panel {
    flex: 1 1 auto;
    margin: 6px 0;
    color: #111111;
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    padding-top: 3px;
    word-break: break-word;
}

.swnova-toaster-container .message-title {
    flex: 1 1 auto;
    margin: 10px 0;
    color: #111111;
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    font-weight: 600;
    display: unset;
    margin-right: 5px;
}

.swnova-toaster-container .footer {
    display: flex;
    height: 3px;
}

.swnova-toaster-container .footer-left {
    flex: 0 0;
    flex-basis: 0%;
    -webkit-animation-name: swnova_toaster_timer;
    animation-name: swnova_toaster_timer;
    animation-timing-function: linear;
}

.swnova-toaster-container .swnova-toaster.info .footer-left {
    background-color: rgba(28, 142, 177, 1);
}
.swnova-toaster-container .swnova-toaster.success .footer-left {
    background-color: rgba(0, 167, 83, 1);
}
.swnova-toaster-container .swnova-toaster.error .footer-left {
    background-color: rgba(221, 44, 0, 1);
}
.swnova-toaster-container .swnova-toaster.warning .footer-left {
    background-color: rgba(254, 196, 5, 1);
}

.swnova-toaster-container .footer-right {
    flex: 1 0 auto;
    background-color: transparent;
}

.swnova-toaster-container .close-container {
    display: flex;
    flex-flow: column;
}
.swnova-toaster-container .close-icon {
    font-size: 16px;
    padding: 7px 8px;
    color: #1c8eb1;
    cursor: pointer;
    border-radius: 3px;
    margin: 3px 3px 0px 3px;
}
.swnova-toaster-container .close-icon:hover {
    background-color: rgba(17,17,17,.05);
}

.swnova-toaster-container .icon {
    font-size: 16px;
    padding: 9px 8px;
}

.swnova-toaster-container .swnova-toaster:hover .bottom-container-left {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@-webkit-keyframes swnova_toaster_timer { 
    from {flex-basis: 100%;} to {flex-basis: 0%;} 
} 

@keyframes swnova_toaster_timer { 
    from {flex-basis: 100%;} to {flex-basis: 0%;} 
}

/*-------------------SSO LOGIN-------------------*/
#attendedMainContainer #componentContainer .component-container-body .login-container{
    width: 100%;
    padding: 30px 50px 25px 50px;
    display: flex;
    flex-flow: column;
}
#attendedMainContainer #componentContainer .component-container-body .login-container .title{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 30px;
}
#attendedMainContainer #componentContainer .component-container-body .login-container .form-container{
    display: flex;
    flex-flow: column;
}
#attendedMainContainer #componentContainer .component-container-body .login-container .form-container .widget-label{
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
}
#attendedMainContainer #componentContainer .component-container-body .login-container .form-container .email-input{
    width: 100%;
    margin-bottom: 15px;
    height: 30px;
    padding: 7px;
    font-size: 13px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
}
#attendedMainContainer #componentContainer .component-container-body .login-container .form-container .email-input::placeholder{
    color: #888888;
}
#attendedMainContainer #componentContainer .component-container-body .login-container .form-container .login-button{
    max-width: 100%;
    margin: 0px;  
}
#attendedMainContainer #componentContainer .component-container-body .login-container .form-container .need-help-link{
    width: 100%;
    height: 45px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
#attendedMainContainer #componentContainer .component-container-body .login-container .form-container .need-help-link a{
    text-decoration: none;
    color: #0079aa;
    font-size: 13px;
}

/*-------------------ONBOARDING-------------------*/
#attendedMainContainer #componentContainer .component-container-body .onboard-container{
    display: flex;
    flex-flow: column;
    padding: 10px;
}
#attendedMainContainer #componentContainer .component-container-body .onboard-container .title{
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 15px;
}
#attendedMainContainer #componentContainer .component-container-body .onboard-container .top-text{
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    padding: 0px 20px;
}
#attendedMainContainer #componentContainer .component-container-body .onboard-container .img-container{
    display: flex;
    align-items: center;
    justify-content: center;
}
#attendedMainContainer #componentContainer .component-container-body .onboard-container .bottom-text-container{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}
#attendedMainContainer #componentContainer .component-container-body .onboard-container .bottom-text-container .main-text{
    font-size: 13px;
}
#attendedMainContainer #componentContainer .component-container-body .onboard-container .bottom-text-container .sub-text{
    color: #8c8c8c;
    font-size: 13px;
}
#attendedMainContainer #componentContainer .component-container-body .onboard-container .btns-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
#attendedMainContainer #componentContainer .component-container-body .onboard-container .btns-container .link{
    display: flex;
}
#attendedMainContainer #componentContainer .component-container-body .onboard-container .btns-container .link a{
    text-decoration: none;
    color: #0079aa;
    font-size: 13px;
    padding-right: 15px;
}

/*-------------------DROPDOWN MENU-------------------*/
#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer{
    display: flex;
    flex-flow: column;
    padding: 10px;
    background-color: white;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer.hidden{
    display: none;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .details-container{
    margin-bottom: 25px;
    display: flex;
    flex-flow: column;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .details-container .title{
    font-weight: 600;
    font-size: 13px;
    padding-bottom: 15px;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .details-container .text{
    font-size: 13px;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .details-container .text span{
    font-weight: 600; 
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .update-licenses-container{
    display: flex;
    flex-flow: column;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .update-licenses-container .title{
    font-weight: 600;
    font-size: 13px;
    padding-bottom: 15px;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .update-licenses-container .row-container{
    display: flex;
    padding-bottom: 15px;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .update-licenses-container .row-container .text{
    flex: 1 1 auto;
    font-size: 13px;
    display: flex;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .update-licenses-container .row-container .licenses-drop-container{
    border: 1px solid blue;
    flex: 1 1 auto;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .update-licenses-container .row-container .sub-text{
    font-size: 13px;
    color: #969696;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .update-licenses-container .row-container .text-value{
    flex: 1 1 auto;
    font-size: 13px;
    display: flex;
    justify-content: flex-end;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .button-container{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
    margin-top: 5px;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .button-container .tc-attended-button{
    margin-right: 0px;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .details-container .general-container{
    display: flex;
    flex-flow: column;
    margin-bottom: 5px;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .details-container .general-container .checkbox-container{
    display: flex;
    flex-flow: column;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .details-container .general-container .checkbox-container .checkbox-row{
    display: flex;
    margin-bottom: 15px;
    align-items: center;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .details-container .general-container .checkbox-container .checkbox-row .checkbox-text{
    font-size: 13px; 
    padding-left: 5px;
}

#attendedMainContainer #componentContainer .component-container-body #componentDropdownMenuContainer .details-container .terms-container{
    border: 1px solid blue;
}

/*-------------------LOADING VIEWS-------------------*/
.attended-spinner-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
    overflow: hidden;
}

.attended-spinner-container .spinner{
    animation: rotate 2s linear infinite;
    width: 30px;
    height: 30px;
}
    
.attended-spinner-container .spinner .path {
    stroke: #33d0db;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

.attended-spinner-container .spinner .path-background{
    stroke: #e1e1e1;
    stroke-linecap: round;
}


::-webkit-scrollbar{
    width: 6px; 
    height: 6px; 
}

::-webkit-scrollbar-track{
background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.26);
}


div{
scrollbar-color: rgba(0, 0, 0, 0.26) rgba(0, 0, 0, 0);
scrollbar-width: thin;
}

/*Nova Toast*/
.swnova-toaster-container {
    display: flex;
    position: fixed;
    padding: 5px;
    flex-flow: column;
    overflow: hidden;
    max-height: calc(100% - 70px);
    z-index: 1000;
}
.swnova-toaster-container.top-right {
    top: 60px;
    right: 10px;
    width: 450px;
}
.swnova-toaster-container.top-left {
    top: 60px;
    left: 10px;
    width: 450px;
}
.swnova-toaster-container.top-center {
    top: 60px;
    left: calc(50% - 225px);
    width: 450px;
}
.swnova-toaster-container.top-full {
    top: 60px;
    left: 10px;
    width: calc(100% - 20px);
}
.swnova-toaster-container.bottom-right {
    bottom: 10px;
    right: 10px;
    width: 450px;
}
.swnova-toaster-container.bottom-left {
    bottom: 10px;
    left: 10px;
    width: 450px;
}
.swnova-toaster-container.bottom-center {
    bottom: 10px;
    left: calc(50% - 225px);
    width: 450px;
}
.swnova-toaster-container.bottom-full {
    bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);
}

.swnova-toaster-container .swnova-toaster {
    height: auto;
    display: flex;
    z-index: 950;
    background: white;
    background-color: white !important;
    flex-flow: column;
    border: 1px solid;
    margin-bottom: 10px;
    flex: 1 0 auto;
    box-shadow: 0 0 5px 0 #a7a7a755;
}

.swnova-toaster-container .swnova-toaster.show {
    opacity: 1;
}

.swnova-toaster-container .swnova-toaster.hidden {
    opacity: 0;
    transition: opacity 4s linear;
}

.swnova-toaster-container .swnova-toaster.info,
.swnova-toaster-container .swnova-toaster.info > * {
    color: rgb(28, 142, 177);
    border-color: rgb(28, 142, 177);
    background-color: rgba(28, 142, 177, 0.1);
}
.swnova-toaster-container .swnova-toaster.success,
.swnova-toaster-container .swnova-toaster.success > * {
    color: rgb(0, 167, 83);
    border-color: rgb(0, 167, 83);
    background-color: rgba(0, 167, 83, 0.1);
}
.swnova-toaster-container .swnova-toaster.error,
.swnova-toaster-container .swnova-toaster.error > * {
    color: rgb(221, 44, 0);
    border-color: rgb(221, 44, 0);
    background-color: rgba(221, 44, 0, 0.1);
}
.swnova-toaster-container .swnova-toaster.warning,
.swnova-toaster-container .swnova-toaster.warning > * {
    color: rgb(254, 196, 5);
    border-color: rgb(254, 196, 5);
    background-color: rgba(254, 196, 5, 0.1);
}

.swnova-toaster-container .main-container {
    display: flex;
}

.swnova-toaster-container .message-panel {
    flex: 1 1 auto;
    margin: 6px 0;
    color: #111111;
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    padding-top: 3px;
    word-break: break-word;
}

.swnova-toaster-container .message-title {
    flex: 1 1 auto;
    margin: 10px 0;
    color: #111111;
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    font-weight: 600;
    display: unset;
    margin-right: 5px;
}

.swnova-toaster-container .footer {
    display: flex;
    height: 3px;
}

.swnova-toaster-container .footer-left {
    flex: 0 0;
    flex-basis: 0%;
    -webkit-animation-name: swnova_toaster_timer;
    animation-name: swnova_toaster_timer;
    animation-timing-function: linear;
}

.swnova-toaster-container .swnova-toaster.info .footer-left {
    background-color: rgba(28, 142, 177, 1);
}
.swnova-toaster-container .swnova-toaster.success .footer-left {
    background-color: rgba(0, 167, 83, 1);
}
.swnova-toaster-container .swnova-toaster.error .footer-left {
    background-color: rgba(221, 44, 0, 1);
}
.swnova-toaster-container .swnova-toaster.warning .footer-left {
    background-color: rgba(254, 196, 5, 1);
}

.swnova-toaster-container .footer-right {
    flex: 1 0 auto;
    background-color: transparent;
}

.swnova-toaster-container .close-container {
    display: flex;
    flex-flow: column;
}
.swnova-toaster-container .close-icon {
    font-size: 16px;
    padding: 7px 8px;
    color: #1c8eb1;
    cursor: pointer;
    border-radius: 3px;
    margin: 3px 3px 0px 3px;
}
.swnova-toaster-container .close-icon:hover {
    background-color: rgba(17,17,17,.05);
}

.swnova-toaster-container .icon {
    font-size: 16px;
    padding: 9px 8px;
}

.swnova-toaster-container .swnova-toaster:hover .bottom-container-left {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@-webkit-keyframes swnova_toaster_timer { 
    from {flex-basis: 100%;} to {flex-basis: 0%;} 
} 

@keyframes swnova_toaster_timer { 
    from {flex-basis: 100%;} to {flex-basis: 0%;} 
}

/* TakeControlAttendedWidgetStyle.css */
@import url("https://nable-remote-control.s3.amazonaws.com/code/fonts/xuico/3.19/xuico.css");

:root {
    --sw-color: #F99D1C;
    --n-able-color: #C046FF;
    --light-blue: #4FB2EC;
    --light-blue: #4FB2EC;
    --red: #DD2C00;
    --green: #00A753;
    --blue: #037598;
    --orange: #F89F1C;
    --gray: #B8B9BB;
    --yellow: #FEC405;
    --lighter-blue: #84D3F5;
}

#TCWidget{
    width: 100%;
    height: 100%;
    position: relative;
    font-family: 'Open Sans', sans-serif;
}

#TCWidget #TCWidgetRemoteIconButton{
    color: #9a9a9a;
    font-size: 20px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#TCWidget #TCWidgetRemoteIconButton.enabled{
    color: white;
}

#TCWidget #TCWidgetRemoteIconButton.open{
    color: var(--sw-color);
}

.n-able #TCWidget #TCWidgetRemoteIconButton.open{
    color: var(--n-able-color);
}

#TCWidget #TCWidgetRemoteIconButton .ic{
    position: relative;
}

#TCWidget #TCWidgetRemoteIconButton .badge{
    width: 15px;
    height: 15px;
    background-color: #eb1c1c;
    position: absolute;
    border-radius: 8px;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: white;
    user-select: none;
    z-index: 1;
}

#TCWidget .tc-widget-component-wrapper.hidden{
    display:none;
}

#TCWidget .tc-widget-arrow{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 7px 7px;
    border-color: transparent transparent #ffffff transparent;
    position: absolute;
    top: 43px;
    right: -4px;
    /*position: relative;
    top: -7px;
    right: -17px;*/
    z-index: 99;
}

#TCWidget .tc-widget-component-background{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    cursor: default;
}

/*-------------------EMPTY-------------------*/
#TCWidget .tc-widget-component-wrapper .tc-widget-arrow{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 7px 7px;
    border-color: transparent transparent #ffffff transparent;
    position: absolute;
    top: 50px;
    right: 14px;
    z-index: 100;
}

#TCWidget .tc-widget-component-wrapper .empty-container{
    width: 402px;
    height: 170px;
    border: none;
    position: absolute;
    top: 50px;
    right: -10px;
    z-index: 99;
    user-select: none;
    background-color: white;
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

#TCWidget .tc-widget-component-wrapper .empty-container.hidden{
    display: none;
}

#TCWidget .tc-widget-component-wrapper .inner-widget-container.hidden{
    display: none;
}

/*-------------------LOADING VIEWS-------------------*/
.attended-spinner-container{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.attended-spinner-container .spinner{
    animation: rotate 2s linear infinite;
    width: 50px;
    height: 50px;
}
    
.attended-spinner-container .spinner .path {
    stroke: #33d0db;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

.attended-spinner-container .spinner .path-background{
    stroke: #e1e1e1;
    stroke-linecap: round;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/*-------------------ERROR-------------------*/

#TCWidget .tc-widget-component-wrapper .error-container{
    width: 402px;
    border: none;
    position: absolute;
    top: 50px;
    right: -10px;
    z-index: 99;
    user-select: none;
    background-color: white;
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.12);
    cursor: default;
}

#TCWidget .tc-widget-component-wrapper .error-container.hidden{
    display: none;
}

#TCWidget .tc-widget-component-wrapper .error-container .banner-container{
    padding: 10px;
    background-color: white;
    width: 100%;
    height: 100%;
    user-select: none;
}

#TCWidget .tc-widget-component-wrapper .error-container .banner-container .banner-elem{
    width: 100%;
    background-color: #ddeef3;
    border: 1px solid #1c8eb1;
    display: flex;
    padding: 8px;
}

#TCWidget .tc-widget-component-wrapper .error-container .banner-container .banner-elem .icon-container{
    display: flex;
    color: #1c8eb1;
    padding-right: 8px;
}

#TCWidget .tc-widget-component-wrapper .error-container .banner-container .banner-elem .icon-container span{
    font-size: 16px;
}

#TCWidget .tc-widget-component-wrapper .error-container .banner-container .banner-elem .text-container{
    display: flex;
    flex-flow: column;
    color: black;
    line-height: normal;
    text-align: left;
    margin-top: -2px;
}

#TCWidget .tc-widget-component-wrapper .error-container .banner-container .banner-elem .text-container .top{
    display: flex;
    font-size: 13px;
    font-weight: 600;
}

#TCWidget .tc-widget-component-wrapper .error-container .banner-container .banner-elem .text-container .bottom{
    display: flex;
    font-size: 13px;
    padding-top: 5px;
    white-space: normal;
}

#TCWidget div.search {
    position: relative;
    width: 100%;
    max-width: 400px;
    min-width: 180px;
    border: 0.5px solid #D5D5D5;
    height: 30px;
    border-radius: 3px;
    background-color: #FFFFFF;
    box-shadow: inset 0px 0.5px 1px 0px rgba(51, 51, 51, 0.3);
}
#TCWidget div.search:hover {
    border-color: #999999;
}
#TCWidget div.search.focused {
    border-color: #006F9D;
}
#TCWidget div.search input, div.search input:focus {
    float: left;
    font-family: "Open Sans";
    font-size: 13px;
    color: #111111;
    line-height: 16px;
    text-align: left;
    width: calc(100% - 80px);
    height: 100%;
    border: none;
    margin-left: 10px;
    background: none;
    outline: none;
}
#TCWidget div.search input::selection {
    background: rgba(192, 70, 255, 0.15);
}
#TCWidget div.search > div.searchSubmit, div.search > div.searchReset {
    position: absolute;
    font-size: 16px;
    width: 30px;
    height: 28px;
}
#TCWidget div.search.active > div.searchSubmit:hover, div.search.active > div.searchReset:hover {
    background: rgba(17, 17, 17, 0.05);
    cursor: pointer;
}
#TCWidget div.search > div.searchSubmit {
    right: 0px;
}
#TCWidget div.search > div.searchReset {
    display: none;
    right: 30px;
    border-right: 1px #D5D5D5 solid;
}
#TCWidget div.search.active > div.searchReset {
    display: block;
}
#TCWidget div.search i {
    position: absolute;
    top: 22%;
    left: 25%;
    color: #878787
}
#TCWidget div.search.active i {
    color: #0079AA;
}
#TCWidget span.searchhighlight {
    background-color: rgba(249, 157, 28, 0.3);
}