/* styles */

body, html {
    height: 100%;
}

.intro p, .concept-container p {
    padding-top: 10px;
}

@media (max-width: 769px) {
    .container {
        max-width: 100%;
        margin: 0;
    }
}

a.openswitch {
    display: block;
}

a.openswitch.selected {
    font-weight: bold;
    background-color: rgba(169, 188, 253, 0.399);
}

.command-list, .example-list {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 0;
    border-bottom: 2px dashed #888;
    border-top: 2px dashed #888;
    background-color: #EEE;
}

.command-list a.openswitch {
    font-family: Courier New;
}

.concept-area {
    padding-bottom: 20px;
}

.concept-container {
    display: none;
}

.playground-container {
    margin-top: 20px;
    position: relative;
}

span.cmd {
    background-color: #222222;
    color: #FFFFFF;
    font-family: Courier New;
    padding: 0 0.2em;
}

.svg-container {
    margin-left:250px;
    display: block;
    overflow: auto;
    border: 1px dotted #AAA;
}

.svg-container.remote-container {
    position: absolute;
    top: 0px; right: 0px;
    background-color: #EFF1FF;
    border-left: 1px dotted #AAA;
    border-bottom: 1px dotted #AAA;
    transition: height 0.3s ease;
}

#ExplainGitZen-Container {
    position: sticky;
    top: 0; bottom: 0; right: 0; left: 0;
    height: 100%;
    z-index: 1000;
}

#ExplainGitZen-Container .svg-container {
    display: inline-block;
    border: 1px dotted #AAA;
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 250px;
    margin-left: 0;
}

#ExplainGitZen-Container .svg-container.remote-container {
    position: absolute;
    top: 0px; right: 0px; left: auto; bottom: auto;
    background-color: #EFF1FF;
    border-left: 1px dotted #AAA;
    border-bottom: 1px dotted #AAA;
}

#ExplainGitZen-Container .playground-container {
    position: absolute;
    top: 0; bottom: 20px; right: 20px; left: 20px;
}

#ExplainGitZen-Container .svg-container svg {
    background-color: white;
}

.remote-name-display {
    font-weight: bold;
    text-align: right;
}

.control-box {
    display: inline-block;
    position: absolute;
    top: 0px; bottom: 0;
    width: 250px;
    vertical-align: bottom;
    background-color: #000;
    border: 1px dotted #AAA;
}

.control-box button {
    font-family: Courier New;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.control-box .log {
    overflow-y: auto;
    position: absolute;
    top: 0px; bottom: 20px; left: 0; right: 0;
    border-bottom: 1px solid #AAA;
}

.control-box .log,
.control-box input[type="text"] {
    font-family: Courier New;
    font-size: 15px;
}

.control-box .log .command-entry {
    padding-left: 15px;
    color: #FFF;
    line-height: 14px;
    background: url(../images/prompt.gif) no-repeat left center transparent;
}

.control-box input[type="text"] {
    position: absolute;
    bottom: 0; 
    padding-left: 15px;
    color: #FFF;
    line-height: 14px;
    background: url(../images/prompt.gif) no-repeat left center transparent;
}

.control-box .log .info,
.control-box .log .error {
    font-size: 15px;
    padding: 5px;
}

.control-box .log .info {
    color: #FFC;
}

.control-box .log .error {
    color: #FCC;
}

.control-box input[type="text"] {
    width: 100%;
    border: none;
}

.control-box input[type="text"]:focus {
    outline: none;
}

circle.commit {
    fill: #EEEEEE;
    stroke: #888888;
    stroke-width: 3;
}

circle.commit.checked-out {
    fill: #CCFFCC !important;
    stroke: #339900;
}

circle.commit.merge-commit {
    stroke: #663300;
    fill: #FFFFCC;
}

circle.commit.reverted {
    fill: #FFC;
    stroke: #933;
}

circle.commit.rebased {
    stroke: #3300CC;
    fill: #CCCCFF;
}

circle.commit.branchless {
    fill: #FEFEFE;
    stroke: #DDD;
}

.commit-pointer {
    stroke: #666;
    stroke-width: 4;
}

.merge-pointer {
    stroke: #663300;
    stroke-width: 4;
}

.commit-pointer.branchless,
.merge-pointer.branchless {
    stroke: #DDD;
    stroke-width: 2;
}

text.id-label {
	text-anchor: middle;
	font-family: Courier New;
	font-weight: bolder;
	fill: #666;
	font-size: 12px;
}

text.message-label {
    text-anchor: middle;
    font-family: Courier New;
    fill: #666;
    font-size: 13px;
}

g.branch-tag > rect {
	fill: #FFCC66;
	stroke: #CC9900;
	stroke-width: 2;
}

g.branch-tag.git-tag > rect {
	fill: #7FC9FF;
	stroke: #0026FF;
}

g.branch-tag.remote-branch > rect {
	fill: #CCC;
	stroke: #888;
}

g.branch-tag > text {
	text-anchor: middle;
	fill: #000;
	font-size: 11px;
	font-family: Arial;
}

g.head-tag > rect {
	fill: #CCFFCC;
	stroke: #339900;
	stroke-width: 2;
}

g.head-tag > text {
	text-anchor: middle;
	fill: #000;
	font-size: 11px;
	font-family: Arial;
	font-weight: bold;
	text-transform: uppercase;
}

#github-mobile {
    display: none;
}

#ExplainGitZen {
    height: 100%;
}

#playground-init .control-box, #playground-clone .control-box {
    width: 100%;
}

#playground-status .control-box {
    width: 45%;
}

#playground-commit .control-box, 
#playground-show .control-box,
#playground-clean .control-box,
#playground-deletebranches .control-box {
    width: 40%;
}

#playground-commit .svg-container, 
#playground-show .svg-container,
#playground-clean .svg-container,
#playground-deletebranches .svg-container {
    margin-left: 40%;
}

#playground-init, #playground-clone, #playground-status {
    height: 30em;
}

.file-box {
    background: #f8f9fa;
    border: 1px solid #ddd;
    padding: 10px;
    overflow-y: auto;
}

.file-tree {
    font-family: monospace;
    height: 150px; 
    overflow-y: auto; 
}

.tree-node {
    margin: 3px 0;
}

.directory {
    color: #555;
    font-weight: bold;
}

.directory::before {
    content: '📁 ';
}

.file::before {
    content: '📄 ';
    margin-right: 5px;
}

.file-box input {
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    border: 1px solid #ddd;
}

#playground-status .file-box {
    width: 55%;
    margin-left: 45%;
}

#playground-commit .file-box,
#playground-show .file-box,
#playground-clean .file-box,
#playground-deletebranches .file-box {
    width: 60%;
    margin-left: 40%;
}

#playground-branch .file-box, 
#playground-checkout .file-box, 
#playground-checkout-b .file-box, 
#playground-tag .file-box,
#playground-reset .file-box,
#playground-revert .file-box,
#playground-merge .file-box,
#playground-rebase .file-box,
#playground-fetch .file-box,
#playground-pull .file-box,
#playground-push .file-box,
#playground-fetchrebase .file-box,
#playground-free .file-box {
    width: 70%;
    margin-left: 30%;
}

#playground-branch .control-box, 
#playground-checkout .control-box, 
#playground-checkout-b .control-box, 
#playground-tag .control-box,
#playground-reset .control-box,
#playground-revert .control-box,
#playground-merge .control-box,
#playground-rebase .control-box,
#playground-fetch .control-box,
#playground-pull .control-box,
#playground-push .control-box,
#playground-fetchrebase .control-box,
#playground-free .control-box {
    width: 30%;
}

#playground-branch .svg-container, 
#playground-checkout .svg-container, 
#playground-checkout-b .svg-container, 
#playground-tag .svg-container,
#playground-reset .svg-container,
#playground-revert .svg-container,
#playground-merge .svg-container,
#playground-rebase .svg-container,
#playground-fetch .svg-container,
#playground-pull .svg-container,
#playground-push .svg-container,
#playground-fetchrebase .svg-container,
#playground-free .svg-container {
    margin-left: 30%;
}

#playground-status .svg-container {
    margin-left: 0%;
    width: 10px;
}

#playground-fetch .svg-container.remote-container,
#playground-pull .svg-container.remote-container,
#playground-push .svg-container.remote-container,
#playground-fetchrebase .svg-container.remote-container,
#playground-free .svg-container.remote-container {
    top: 16.8em;
    width: 34%;
}

.svg-container.remote-container svg.collapsed .commits,
.svg-container.remote-container svg.collapsed .tags,
.svg-container.remote-container svg.collapsed .pointers {
    display: none !important;
}

/* Ajustes generales para móviles */
@media (max-width: 767px) {
    .concept-container {
      margin-left: -1rem;
      margin-right: -1rem;
      border-radius: 0;
      border-left: none;
      border-right: none;
    }

    .control-box {
        width: 100%;
        height: 250px;
        z-index: 1000;
    }

    .svg-container {
        margin-left: 0;
        padding-top: 270px;
    }

    .control-box input[type="text"] {
        width: 100%;
        height: 30px;
    }

    .control-box .log {
        bottom: 28px;
    }

    #ExplainGitZen {
        width: 100%;
    }

    #ExplainGitZen-Container .svg-container {
        width: 100%;
        padding-top: 250px;
        left: 0;
    }

    .openswitch {
        text-wrap: balance;
    }

    #github {
        display: none;
    }

    #github-mobile {
        display: flex;
    }

    #playground-init .control-box, #playground-clone .control-box {
        width: 100%;
        height: 100%;
    }

    #playground-commit .control-box, 
    #playground-status .control-box, 
    #playground-branch .control-box, 
    #playground-checkout .control-box, 
    #playground-checkout-b .control-box,
    #playground-tag .control-box,
    #playground-show .control-box,
    #playground-reset .control-box,
    #playground-revert .control-box,
    #playground-merge .control-box,
    #playground-rebase .control-box,
    #playground-fetch .control-box,
    #playground-pull .control-box,
    #playground-push .control-box,
    #playground-clean .control-box,
    #playground-fetchrebase .control-box,
    #playground-deletebranches .control-box,
    #playground-free .control-box {
        width: 100%;
    }
    
    #playground-commit .svg-container, 
    #playground-branch .svg-container, 
    #playground-checkout .svg-container, 
    #playground-checkout-b .svg-container,
    #playground-tag .svg-container,
    #playground-show .svg-container,
    #playground-reset .svg-container,
    #playground-revert .svg-container,
    #playground-merge .svg-container,
    #playground-rebase .svg-container,
    #playground-fetch .svg-container,
    #playground-pull .svg-container,
    #playground-push .svg-container,
    #playground-clean .svg-container,
    #playground-fetchrebase .svg-container,
    #playground-deletebranches .svg-container,
    #playground-free .svg-container {
        margin-left: 0%;
        padding-top: 0;
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    #playground-commit .file-box,
    #playground-show .file-box,
    #playground-clean .file-box {
        width: 100%;
        margin-left: 0%;
        position: absolute;
        bottom: 12.6em;
    }

    #playground-branch .file-box, 
    #playground-tag .file-box,
    #playground-reset .file-box,
    #playground-revert .file-box {
        width: 100%;
        margin-left: 0%;
        position: absolute;
        bottom: 25.1em;
    }

    #playground-checkout .file-box, 
    #playground-checkout-b .file-box,
    #playground-merge .file-box,
    #playground-rebase .file-box,
    #playground-fetch .file-box,
    #playground-pull .file-box,
    #playground-push .file-box,
    #playground-fetchrebase .file-box,
    #playground-deletebranches .file-box {
        width: 100%;
        margin-left: 0%;
        position: absolute;
        bottom: 31.3em;
    }

    #playground-free .file-box {
        width: 100%;
        margin-left: 0%;
        position: absolute;
        bottom: 43.9em;
    }

    #playground-commit,
    #playground-show,
    #playground-clean {
        height: 45em;
    }

    #playground-branch, #playground-tag {
        height: 57.5em;
    }

    #playground-checkout, 
    #playground-checkout-b, 
    #playground-merge, 
    #playground-rebase, 
    #playground-fetch, 
    #playground-pull,
    #playground-push,
    #playground-fetchrebase,
    #playground-deletebranches {
        height: 63.5em;
    }

    #playground-free {
        height: 76.3em;
    }

    #playground-fetch .svg-container.remote-container,
    #playground-pull .svg-container.remote-container,
    #playground-push .svg-container.remote-container,
    #playground-fetchrebase .svg-container.remote-container,
    #playground-free .svg-container.remote-container {
        position: absolute;
        top: 36em;
        right: 0;
        width: 100%;
        z-index: 10;
    }

    #playground-init .svg-container, 
    #playground-init .file-box, 
    #playground-clone .svg-container, 
    #playground-clone .file-box,
    #playground-status .svg-container
    {
        display: none;
    }

    #playground-status {
        height: 35em;
    }

    #playground-reset, #playground-revert {
        height: 51.4em;
    }

    #playground-reset .file-box, #playground-revert .file-box {
        bottom: 19em;
    }

    #playground-status .file-box {
        width: 100%;
        margin-left: 0%;
        position: absolute;
        bottom: 1em;
    }

    #FetchRebase, #DeleteBranches {
        width: 40em;
    }
  }
  
  .cmd {
      word-break: break-word;
      display: inline-block;
      padding: 0.15rem 0.3rem;
  }