tryit-jssip.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{background:none;line-height:1}fieldset,textarea,input,button,select{min-width:0;padding:0;border:none;background-color:transparent;font-family:inherit;font-weight:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;}fieldset::-ms-clear,textarea::-ms-clear,input::-ms-clear,button::-ms-clear,select::-ms-clear{display:none}fieldset::-ms-expand,textarea::-ms-expand,input::-ms-expand,button::-ms-expand,select::-ms-expand{display:none}button::-moz-focus-inner{border:0}table{border-collapse:collapse;border-spacing:0}ol,ul{list-style:none}*{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}@font-face{font-family:'Poiret One';font-style:normal;font-weight:400;src:url("/resources/fonts/PoiretOne.ttf") format('truetype'),url("/resources/fonts/PoiretOne.woff") format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'),local('Roboto-Light'),url("/resources/fonts/Roboto-light-ext.woff2") format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'),local('Roboto-Light'),url("/resources/fonts/Roboto-light.woff2") format('woff2'),url("/resources/fonts/Roboto-light.ttf") format('ttf');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url("/resources/fonts/Roboto-regular-ext.woff2") format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url("/resources/fonts/Roboto-regular.woff2") format('woff2'),url("/resources/fonts/Roboto-regular.ttf") format('ttf');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url("/resources/fonts/Roboto-medium-ext.woff2") format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url("/resources/fonts/Roboto-medium.woff2") format('woff2'),url("/resources/fonts/Roboto-medium.ttf") format('ttf');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}html{height:100%;overflow:hidden;font-family:'Roboto';font-size:16px;background-color:#444}body{height:100%;background:none}*{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}#tryit-jssip-container{height:100%;width:100%;}#tryit-jssip-container [data-component='Logo'].big{font-size:4rem}#tryit-jssip-container [data-component='Logo'].small{font-size:2rem}#tryit-jssip-container [data-component='Logo'] > h1{font-family:'Poiret One';font-weight:bold;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:rgba(255,255,255,0.85);}#tryit-jssip-container [data-component='Logo'] > h1 span.colorized{color:rgba(0,239,255,0.85)}#tryit-jssip-container [data-component='Logo'] > h1 span.small{font-size:.75em}#tryit-jssip-container [data-component='App']{position:relative;height:100%;width:100%}#tryit-jssip-container [data-component='Login']{position:relative;height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;will-change:opacity;}#tryit-jssip-container [data-component='Login'].transition-appear{opacity:0}#tryit-jssip-container [data-component='Login'].transition-appear.transition-appear-active{-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:1s;transition-duration:1s;opacity:1}#tryit-jssip-container [data-component='Login'] > .logo-container{margin:20px auto}#tryit-jssip-container [data-component='Login'] > form{position:relative;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;min-height:200px;width:300px;margin:50px auto;background-color:rgba(255,255,255,0.9);border-radius:4px;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,0.9);box-shadow:0 0 15px 0 rgba(0,0,0,0.9);padding:30px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}#tryit-jssip-container [data-component='Login'] > form > .settings-icon-container{position:absolute;right:10px;top:10px;}#tryit-jssip-container [data-component='Login'] > form > .settings-icon-container > .icon:hover{color:#111;cursor:pointer}#tryit-jssip-container [data-component='Login'] > .submit-container{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:20px auto;}@media (min-device-width:801px){#tryit-jssip-container [data-component='Login'] > .submit-container{width:80px;height:80px}}@media (max-device-width:800px){#tryit-jssip-container [data-component='Login'] > .submit-container{width:60px;height:60px}}#tryit-jssip-container [data-component='Login'] > .submit-container > .submit-button{width:100%;height:100%;background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gU3ZnIFZlY3RvciBJY29ucyA6IGh0dHA6Ly93d3cub25saW5ld2ViZm9udHMuY29tL2ljb24gLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPG1ldGFkYXRhPiBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiA8L21ldGFkYXRhPg0KPGc+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEwLDUwMGMwLDI3MC42LDIxOS40LDQ5MCw0OTAsNDkwczQ5MC0yMTkuNCw0OTAtNDkwYzAtMjcwLjctMjE5LjQtNDkwLTQ5MC00OTBTMTAsMjI5LjMsMTAsNTAweiBNNzEuMyw1MDBjMC0yMzYuOCwxOTItNDI4LjgsNDI4LjgtNDI4LjhjMjM2LjksMCw0MjguOCwxOTIsNDI4LjgsNDI4LjhjMCwyMzYuNy0xOTEuOSw0MjguOC00MjguOCw0MjguOEMyNjMuMyw5MjguOCw3MS4zLDczNi43LDcxLjMsNTAweiIvPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yMTEsNDU0LjFoNDkwdjkxLjlIMjExVjQ1NC4xeiIvPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik00NTIuMiwyODUuNmgxMjIuNWwyMTQuNCwyMTlMNTc0LjcsNzE0LjRINDUyLjJsMjE0LjQtMjA5LjhMNDUyLjIsMjg1LjZ6Ii8+PC9nPg0KPC9zdmc+DQo=");background-position:center;background-size:cover;background-repeat:no-repeat;background-size:100%;cursor:pointer;-webkit-transition-property:opacity transform;transition-property:opacity transform;-webkit-transition-duration:.5s;transition-duration:.5s;}#tryit-jssip-container [data-component='Login'] > .submit-container > .submit-button.disabled{opacity:.25;pointer-events:none}#tryit-jssip-container [data-component='Login'] > .submit-container > .submit-button:hover{opacity:.9;-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg);-webkit-transform:scale(1.2);transform:scale(1.2)}#tryit-jssip-container [data-component='Login'] > .settings-container{position:absolute;left:0;right:0;top:0;bottom:0;z-index:10;}@media (min-device-width:801px){#tryit-jssip-container [data-component='Login'] > .settings-container{margin:50px auto;max-width:500px;min-width:400px}}#tryit-jssip-container [data-component='Settings']{height:100%;width:100%;padding:20px;overflow:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background-color:rgba(255,255,255,0.98);will-change:opacity;}@media (min-device-width:801px){#tryit-jssip-container [data-component='Settings']{border-radius:4px;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,0.9);box-shadow:0 0 15px 0 rgba(0,0,0,0.9)}}#tryit-jssip-container [data-component='Settings'].transition-appear{opacity:0}#tryit-jssip-container [data-component='Settings'].transition-appear.transition-appear-active{-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:250ms;transition-duration:250ms;opacity:1}#tryit-jssip-container [data-component='Settings'] h1{margin:20px 0 10px 0;padding:6px 16px;background-color:#ddd;}#tryit-jssip-container [data-component='Settings'] h1:first-child{margin-top:0}#tryit-jssip-container [data-component='Settings'] .item{margin:0 16px}#tryit-jssip-container [data-component='Settings'] .separator{width:100%;height:20px}#tryit-jssip-container [data-component='Settings'] > .buttons{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#tryit-jssip-container [data-component='Phone']{position:relative;height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;will-change:opacity;}#tryit-jssip-container [data-component='Phone'].transition-appear{opacity:0}#tryit-jssip-container [data-component='Phone'].transition-appear.transition-appear-active{-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:1s;transition-duration:1s;opacity:1}#tryit-jssip-container [data-component='Phone'] > header{position:relative;z-index:10;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:100%;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,0.9);box-shadow:0 0 15px 0 rgba(0,0,0,0.9);}#tryit-jssip-container [data-component='Phone'] > header > .topbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background-color:#000;color:#fff;}@media (min-device-width:801px){#tryit-jssip-container [data-component='Phone'] > header > .topbar{padding:10px 20px}}@media (max-device-width:800px){#tryit-jssip-container [data-component='Phone'] > header > .topbar{padding:5px 10px}}#tryit-jssip-container [data-component='Phone'] > .content{position:relative;-webkit-box-flex:100;-ms-flex:100 0 auto;flex:100 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#tryit-jssip-container [data-component='UserChip']{max-width:100%;}#tryit-jssip-container [data-component='UserChip'].full-width{width:100% !important}#tryit-jssip-container [data-component='UserChip'] .status{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;}#tryit-jssip-container [data-component='UserChip'] .status.disconnected{background-color:#ccc !important}#tryit-jssip-container [data-component='UserChip'] .status.connecting{background-color:#d4d01c !important;-webkit-animation:UserChip-status-connecting 1s infinite ease-in;animation:UserChip-status-connecting 1s infinite ease-in}#tryit-jssip-container [data-component='UserChip'] .status.connected{background-color:#d4d01c !important}#tryit-jssip-container [data-component='UserChip'] .status.registered{background-color:#47d41c !important}#tryit-jssip-container [data-component='UserChip'] > span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}#tryit-jssip-container [data-component='UserChip'] > span .uri{color:#999}@-webkit-keyframes UserChip-status-connecting{50%{opacity:0}}@keyframes UserChip-status-connecting{50%{opacity:0}}#tryit-jssip-container [data-component='Dialer']{background-color:#eee;}@media (min-device-width:801px){#tryit-jssip-container [data-component='Dialer']{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;padding:10px}}@media (max-device-width:800px){#tryit-jssip-container [data-component='Dialer']{padding:20px}}#tryit-jssip-container [data-component='Dialer'] > .userchip-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}@media (min-device-width:801px){#tryit-jssip-container [data-component='Dialer'] > .userchip-container{-webkit-box-flex:0;-ms-flex:0 10 auto;flex:0 10 auto;max-width:40%;margin-right:10px}}#tryit-jssip-container [data-component='Dialer'] > form.uri-form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}@media (min-device-width:801px){#tryit-jssip-container [data-component='Dialer'] > form.uri-form{-webkit-box-flex:0;-ms-flex:0 10 auto;flex:0 10 auto;max-width:40%;margin-left:10px}}@media (max-device-width:800px){#tryit-jssip-container [data-component='Dialer'] > form.uri-form{margin-top:20px}}#tryit-jssip-container [data-component='Dialer'] > form.uri-form.hidden{display:none}#tryit-jssip-container [data-component='Dialer'] > form.uri-form > .uri-container{-webkit-box-flex:10;-ms-flex:10 10 auto;flex:10 10 auto;margin-right:20px;}@media (min-device-width:801px){#tryit-jssip-container [data-component='Dialer'] > form.uri-form > .uri-container{min-width:300px;max-width:400px}}#tryit-jssip-container [data-component='Session']{position:relative;-webkit-box-flex:100;-ms-flex:100 0 auto;flex:100 0 auto;width:100%;overflow:hidden;will-change:opacity;}#tryit-jssip-container [data-component='Session'].transition-appear{opacity:0}#tryit-jssip-container [data-component='Session'].transition-appear.transition-appear-active{-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:1s;transition-duration:1s;opacity:1}#tryit-jssip-container [data-component='Session'] > video.local-video{position:absolute;z-index:1000;left:15px;top:15px;width:22%;-o-object-fit:cover;object-fit:cover;-webkit-transform:scaleX(-1);transform:scaleX(-1);border:1px solid rgba(255,255,255,0.15);-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,0.9);box-shadow:0 0 15px 0 rgba(0,0,0,0.9);-webkit-transition-property:opacity z-index;transition-property:opacity z-index;-webkit-transition-duration:.5s;transition-duration:.5s;}#tryit-jssip-container [data-component='Session'] > video.local-video.hidden{z-index:-1 !important;opacity:0}#tryit-jssip-container [data-component='Session'] > video.remote-video{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-transition-property:opacity z-index;transition-property:opacity z-index;-webkit-transition-duration:.25s;transition-duration:.25s;}#tryit-jssip-container [data-component='Session'] > video.remote-video.hidden{z-index:-1 !important;opacity:0}#tryit-jssip-container [data-component='Session'] > .no-remote-video-info{position:absolute;left:0;top:0;height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:#333;color:#888;font-size:20px}#tryit-jssip-container [data-component='Session'] > .controls-container{position:absolute;z-index:100;bottom:0;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}#tryit-jssip-container [data-component='Session'] > .controls-container > .controls{width:auto;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;background-color:rgba(0,0,0,0.5);border-top-left-radius:12px;border-top-right-radius:12px;}@media (min-device-width:801px){#tryit-jssip-container [data-component='Session'] > .controls-container > .controls{padding:10px 30px}}@media (max-device-width:800px){#tryit-jssip-container [data-component='Session'] > .controls-container > .controls{padding:5px 20px}}#tryit-jssip-container [data-component='Session'] > .controls-container > .controls > .control{background-size:100%;background-position:center;background-repeat:no-repeat;margin:0 10px;-webkit-transition:opacity .15s ease-in-out 0s !important;transition:opacity .15s ease-in-out 0s !important;opacity:.6;}@media (min-device-width:801px){#tryit-jssip-container [data-component='Session'] > .controls-container > .controls > .control{height:60px !important;width:60px !important}}@media (max-device-width:800px){#tryit-jssip-container [data-component='Session'] > .controls-container > .controls > .control{height:40px !important;width:40px !important}}#tryit-jssip-container [data-component='Session'] > .controls-container > .controls > .control:hover{opacity:.9;cursor:pointer}#tryit-jssip-container [data-component='Session'] > .controls-container > .controls > .control.disabled{pointer-events:none;opacity:.25}#tryit-jssip-container [data-component='Incoming']{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0,0,0,0.25);padding:50px 10px;will-change:opacity;}#tryit-jssip-container [data-component='Incoming'].transition-appear{opacity:0}#tryit-jssip-container [data-component='Incoming'].transition-appear.transition-appear-active{-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:1s;transition-duration:1s;opacity:1}#tryit-jssip-container [data-component='Incoming'] > .buttons{margin-top:40px;}#tryit-jssip-container [data-component='Incoming'] > .buttons > div{width:120px !important}#tryit-jssip-container [data-component='Incoming'] > .buttons > div:first-child{margin-right:10px}#tryit-jssip-container [data-component='Incoming'] > .buttons > div:last-child{margin-left:10px}#tryit-jssip-media-query-detector{position:relative;z-index:-1000;bottom:0;left:0;height:1px;width:1px;}@media (max-device-width:800px){#tryit-jssip-media-query-detector{display:none;position:fixed}}