/* 
CSS Style sheet
Ver. 1.2
Author: Nishant Dogra
Initial built: 09-10-2017
Updated: 30-06-2018
*/

/* Force Framework Roboto Font import */ @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); /* Force Framework Basics styles */ * { margin: 0; padding: 0;} html { font-size: 62.5%; } body { margin: 0; padding: 0; font-size: 16px; line-height: 1.6; font-weight: 300; font-family: 'Roboto', sans-serif; color: #262626; position: relative;} code, blockquote, pre { font-family: "Courier New", Courier, monospace;} h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 18px; font-weight: 300; } h1 { font-size: 36px; line-height: 1.2;} h2 { font-size: 32px; line-height: 1.25;} h3 { font-size: 28px; line-height: 1.3;} h4 { font-size: 24px; line-height: 1.35;} h5 { font-size: 18px; line-height: 1.5;} h6 { font-size: 16px; line-height: 1.6;} p { margin: 2px 0 12px; font-weight: 300;} a { color: #1EAEDB; } a:hover, a:focus, a.active { color: #0FA0CE; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {height: 38px; padding: 6px 10px; background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; box-sizing: border-box; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {-webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { min-height: 65px; padding-top: 6px; padding-bottom: 6px; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {border: 1px solid #33C3F0; outline: 0; } label, legend { display: block; margin-bottom: 5px; font-weight: 600; } fieldset { padding: 0; border-width: 0; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-body { display: inline-block; margin-left: 5px; font-weight: normal; } ul { list-style: circle inside; } ol { list-style: decimal inside; } ol, ul { padding-left: 0; margin-top: 0; margin-bottom: 15px;} ul ul, ul ol, ol ol, ol ul { margin: 15px 0 15px 25px; font-size: 90%; } code {padding: 2px 5px; margin: 0 2px; font-size: 90%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; } pre > code { display: block; padding: 10px 16px; white-space: pre; } th, td { padding: 12px 15px; text-align: left; border: none; border-spacing: 0; border-color: transparent;} th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } input, textarea, select, fieldset { margin-bottom: 5px; } pre, blockquote, dl, figure, table, p, ul, ol, form {margin-bottom: 15px; } hr {margin-top: 30px; margin-bottom: 30px; border-width: 0; border-top: 1px solid #e6e6e6; } header { display: block;} footer { background: rgba(23,12,0,0.8); color: #ffffff; padding: 60px 0 40px; margin-top: 60px;} footer a { color: #f6923a; text-decoration: none;} footer a:hover, footer a:focus { text-decoration: none; color: #f6923a; border-bottom: 1px dotted #f6923a;} footer nav a:after { content: "/"; position: relative; padding: 0 0 0 8px;} footer nav a:last-child:after { content: "";} footer h3 { margin: 0;} footer .logo img{ max-width: 128px;} nav strong { margin-right: 15px;} .header-force-framework { height: 60px;} /* Force Framework Grid Layout styles */ .container { position: relative; width: 100%; max-width: 94%; margin: 0 auto; padding: 0 20px; box-sizing: border-box;} .container:after, .horizontal:after {content: ""; display: table; clear: both;} .container-fluid { position: relative; width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box;} .horizontal { width: 100%; box-sizing: border-box; } .vertical, .verticals { width: 100%; float: left; box-sizing: border-box;} .vertical, .verticals { margin-left: 4%; } .vertical:first-child, .verticals:first-child { margin-left: 0; } .one.vertical, .one.verticals { width: 4.66666666667%; } .two.verticals { width: 13.3333333333%; } .three.verticals { width: 22%; } .four.verticals { width: 30.6666666667%; } .five.verticals { width: 39.3333333333%; } .six.verticals { width: 48%; } .seven.verticals { width: 56.6666666667%; } .eight.verticals { width: 65.3333333333%; } .nine.verticals { width: 74.0%; } .ten.verticals { width: 82.6666666667%; } .eleven.verticals { width: 91.3333333333%; } .twelve.verticals { width: 100%; margin-left: 0; } .one-third.vertical { width: 30.6666666667%; } .two-thirds.vertical { width: 65.3333333333%; } .one-half.vertical { width: 48%; } /* Force Framework Vertical offset styles */ .offset-by-one.vertical, .offset-by-one.verticals { margin-left: 8.66666666667%; } .offset-by-two.vertical, .offset-by-two.verticals { margin-left: 17.3333333333%; } .offset-by-three.vertical, .offset-by-three.verticals { margin-left: 26%;            } .offset-by-four.vertical, .offset-by-four.verticals { margin-left: 34.6666666667%; } .offset-by-five.vertical, .offset-by-five.verticals { margin-left: 43.3333333333%; } .offset-by-six.vertical, .offset-by-six.verticals { margin-left: 52%;            } .offset-by-seven.vertical, .offset-by-seven.verticals { margin-left: 60.6666666667%; } .offset-by-eight.vertical, .offset-by-eight.verticals { margin-left: 69.3333333333%; } .offset-by-nine.vertical, .offset-by-nine.verticals { margin-left: 78.0%;          } .offset-by-ten.vertical, .offset-by-ten.verticals { margin-left: 86.6666666667%; } .offset-by-eleven.vertical, .offset-by-eleven.verticals { margin-left: 95.3333333333%; } .offset-by-one-third.vertical, .offset-by-one-third.verticals { margin-left: 34.6666666667%; } .offset-by-two-thirds.vertical, .offset-by-two-thirds.verticals { margin-left: 69.3333333333%; } .offset-by-one-half.vertical, .offset-by-one-half.verticals { margin-left: 52%; } /* Force Framework Default styles */ .fluid { width: 100%; max-width: auto;} .force-right { float: right; } .force-left { float: left; } .force-text-center { text-align: center; } .force-text-right { text-align: right; } .force-text-left { text-align: left; } .force-full-width { width: 100%; box-sizing: border-box; } .caption { margin: 5px 0 20px; font-weight: 500; font-size: 25px; padding: 7px 15px; background: rgba(64,64,64,1); display: block; border-radius: 3px; color: #ffffff;} ul.inline { list-style: circle inside;} ul.inline li { display: inline-block;} /* Force Framework Padding/Margin default styles */ .force-intro { margin-top: 110px;} .horizontal-pad-10 { padding: 10px 0;} .horizontal-pad-20 { padding: 20px 0;} .horizontal-pad-30 { padding: 30px 0;} .horizontal-pad-40 { padding: 40px 0;} .horizontal-pad-50 { padding: 50px 0;} .horizontal-pad-60 { padding: 60px 0;} .horizontal-pad-70 { padding: 70px 0;} .horizontal-pad-80 { padding: 80px 0;} .horizontal-mar-10 { margin: 10px 0;} .horizontal-mar-20 { margin: 20px 0;} .horizontal-mar-30 { margin: 30px 0;} .horizontal-mar-40 { margin: 40px 0;} .horizontal-mar-50 { margin: 50px 0;} .horizontal-mar-60 { margin: 60px 0;} .horizontal-mar-70 { margin: 70px 0;} .horizontal-mar-80 { margin: 80px 0;} .m-t-10 { margin-top: 10px;} .m-t-20 { margin-top: 20px;} .m-t-30 { margin-top: 30px;} .m-t-40 { margin-top: 40px;} .m-b-10 { margin-bottom: 10px;} .m-b-20 { margin-bottom: 20px;} .m-b-30 { margin-bottom: 30px;} .m-b-40 { margin-bottom: 40px;} .m-l-10 { margin-left: 10px;} .m-l-20 { margin-left: 20px;} .m-l-30 { margin-left: 30px;} .m-l-40 { margin-left: 40px;} .underline { text-decoration: underline;} .op9 { opacity: .9;} .op8 { opacity: .8;} .op7 { opacity: .7;} .op6 { opacity: .6;} .op5 { opacity: .5;} .op4 { opacity: .4;} .op3 { opacity: .3;} .op2 { opacity: .2;} .op1 { opacity: .1;} .op0 { opacity: 0;} .nodrop {cursor: no-drop;} /* Force Framework Navigation styles */ .header-force-framework { position: fixed; top: 0; width: 100%; background: #ffffff; z-index: 9999; height: 100px; line-height: 100px; -webkit-box-shadow: 0 0px 35px 0 rgba(0,0,0,.1); -moz-box-shadow: 0 0px 35px 0 rgba(0,0,0,.1); box-shadow: 0 0px 35px 0 rgba(0,0,0,.1);} .header-force-framework .container{ max-width: 1050px;} .header-force-framework .logo img { max-width: 90px; padding: 5px 0;} .primary-nav { height: 100px; line-height: 100px; text-align: right;} .primary-nav a { font-size: 18px; font-weight: 500; padding: 15px; color: #f68e38; text-decoration: none;} .primary-nav a:hover, .primary-nav a:focus, .primary-nav a.active { border-bottom: 2px solid #f68e38;} /* Force Framework Tables styles */ .force-table-responsive { max-height: 540px; overflow-y: scroll; font-size: 14px;} .force-table-responsive table { margin-bottom: 0;} .force-table-shadow { padding: 15px; -webkit-box-shadow: 0 0px 35px 0 rgba(0,0,0,.1); -moz-box-shadow: 0 0px 35px 0 rgba(0,0,0,.1); box-shadow: 0 0px 35px 0 rgba(0,0,0,.1);} .force-table-compressed th, .force-table-compressed td { padding: 5px 9px;} .force-table-responsive table th { background: #f6f6f6;} .force-table-responsive table tr:nth-child(2n) { background: #f9f9f9;} .force-table-responsive table tr:nth-child(2n+) { background: #ffffff;} .force-table-responsive table th td:first-child, .force-table-responsive table tr td:first-child { padding-left: 12px;} .force-table-shadow thead.dark { background: #676767; color: #ffffff;} .force-table-shadow thead.dark th, .force-table-shadow thead.bg-orange th, .force-table-shadow thead.bg-green th, .force-table-shadow thead.bg-purple th, .force-table-shadow thead.bg-red th, .force-table-shadow thead.bg-violet th, .force-table-shadow thead.bg-pink th, .force-table-shadow thead.bg-alt-blue th { background: transparent !important;} /* Force Framework Buttons styles */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; padding: 0 30px; color: #555; text-align: center; font-size: 11px;  line-height: 38px; letter-spacing: 1px; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; font-weight: 300; float: left; margin: 0 4px 4px 0;} .btn, .button { -webkit-transition: box-shadow ease-in-out .1s; -moz-transition: box-shadow ease-in-out .1s; -o-transition: box-shadow ease-in-out .1s; transition: box-shadow ease-in-out .1s; color: #373737; border: 1px solid rgba(0,0,0,.1); outline: 0;} .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus ,button:focus{ outline: none; outline-offset: 0;} .button:focus, .button:hover { border: 1px solid rgba(0,0,0,.2); outline: 0;} .btn { -webkit-transition: box-shadow ease-in-out .1s; -moz-transition: box-shadow ease-in-out .1s; -o-transition: box-shadow ease-in-out .1s; transition: box-shadow ease-in-out .1s; color: #ffffff;} .button.button-small { line-height: 18px; letter-spacing: .5px; font-size: 12px; padding: 2px 5px;} .button { line-height: 26px; font-size: 16px; padding: 5px 8px;} .button.button-large { line-height: 38px; font-size: 20px; letter-spacing: 1.2px; padding: 8px 20px;} .button.disabled { cursor: no-drop !important; background: #f7f5f5;} .btn[class*='bg-']:hover { box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.1); } /* Force Framework Typography styles */ h1, .h1 { font-size: 36px; line-height: 1.2; font-weight: 800;} h2, .h2 { font-size: 32px; line-height: 1.25; font-weight: 800;} h3, .h3 { font-size: 28px; line-height: 1.3; font-weight: 500;} h4, .h4 { font-size: 24px; line-height: 1.35; font-weight: 500;} h5, .h5 { font-size: 18px; line-height: 1.5; font-weight: 500;} h6, .h6 { font-size: 16px; line-height: 1.6; font-weight: 400;} .large { font-size: 120%;} .small { font-size: 90%;} /* Force Framework background & Text styles */ .white { color: #ffffff;} .bg-white { background-color: #ffffff !important; color: #676767 !important;} .blue { color: #1ba1e5;} .bg-blue { background-color: #1ba1e5 !important; color: #ffffff;} .purple { color: #448aff;} .bg-purple { background-color: #448aff !important; color: #ffffff;} .red { color: #ff5252;} .bg-red { background-color: #ff5252 !important; color: #ffffff;} .orange { color: #ff6d00;} .bg-orange { background-color: #ff6d00 !important; color: #ffffff;} .green { color: #43a047;} .bg-green { background-color: #43a047 !important; color: #ffffff;} .violet { color: #9162e4;} .bg-violet { background-color: #9162e4 !important; color: #ffffff;} .pink { color: #ff6090;} .bg-pink { background-color: #ff6090 !important; color: #ffffff;} .alt-blue { color: #7c9cad;} .bg-alt-blue { background-color: #7c9cad !important; color: #ffffff;} .bg-pink:hover, .bg-pink:focus, .bg-pink:active, .bg-purple:hover, .bg-purple:focus, .bg-purple:active, .bg-violet:hover, .bg-violet:focus, .bg-violet:active, .bg-alt-blue:hover, .bg-alt-blue:focus, .bg-alt-blue:active { color: #ffffff !important;} .gray-pale { color: #526273;} .gray-dark { color: #444444;} .gray-light { color: #908e8e;} .fit-image { max-width: 100%;} /* Force Framework Force box styles */ .force-box { display: block; max-width: 1010px; border-radius: 3px; background: rgba(66, 63, 63, 0.04); margin: 30px auto; color: #adadad;} .force-box .force-box-container { padding: 40px; text-align: center;} .force-box ul { text-align: center;} .force-box .fit-image { max-width: 128px;} .force-box h3 { font-weight: 400;} /* Force Framework badges styles */ .badge { padding: 6px 8px; font-size: 80%; letter-spacing: .1px; background: rgba(0,0,0,.05); margin: 2px; border-radius: 3px; cursor: pointer; float: left;} .badge.small { padding: 2px 4px; font-size: 70%;} .badge.large { padding: 8px 12px; font-size: 120%;} /* Force Framework badges styles */ .alert { display: block; padding: 10px 15px; border-radius: 3px; margin: 10px 0; font-size: 18px;} .alert span { claer: left; display: block; font-size: 80%; margin-top: 4px;} /* Force Framework card styles */ .card { padding: 10px; } .card.half { display: table-cell;} .card .card-data { border-radius: 3px; border: 1px solid rgba(0,0,0,.2); padding: 15px;} .card.one-third { display: table-cell;} .card.one-fourth { display: table-cell;} .card h4 { margin-bottom: 4px;} .card p { margin-bottom: 8px;} .card-data-container { width: calc(100% + 20px); margin-left: -10px;} /* Force Framework Pagination styles */ .pagination { text-align: center; padding: 20px 0;} .pagination a { font-size: 12px; width: 30px; height: 30px; background-color: transparent; color: #222; border: 1px solid rgba(0,0,0,.05); display: inline-block; vertical-align: middle; line-height: 30px; text-decoration: none; border-radius: 50%; margin: 2px; transition: all 0.2s linear;} .pagination a:hover, .pagination a.selected { color: #fff; background-color: #3498db;} .pagination.small a { font-size: 10px; width: 24px; height: 24px; line-height: 24px;} .pagination.large a { font-size: 14px; width: 36px; height: 36px; line-height: 36px;} .pagination.orange a:hover, .pagination.orange a.selected { background-color: #ff6d00;} .pagination.blue a:hover, .pagination.blue a.selected { background-color: #1ba1e5;} .pagination.red a:hover, .pagination.red a.selected { background-color: #ff5252;} .pagination.green a:hover, .pagination.green a.selected { background-color: #43a047;} .pagination.violet a:hover, .pagination.violet a.selected { background-color: #9162e4;} .pagination.pink a:hover, .pagination.pink a.selected { background-color: #ff6090;} .pagination.purple a:hover, .pagination.pink a.selected { background-color: #448aff;} .pagination.alt-blue a:hover, .pagination.alt-blue a.selected { background-color: #7c9cad;} /* Force Framework code display styles */ .code-body-container { display: block;} .code-body { overflow: scroll;} .cool-layout { background: #f9f9f9; font-size: 12px; -webkit-font-smoothing: antialiased;} /* Gist style */ .gist .gist-file { max-height: 540px; overflow-y: scroll;}